求助：实现可嵌套且支持父容器内拖拽的React组件（解决事件冒泡）

问题核心 #

拖拽子组件时父组件同步移动，本质是鼠标事件冒泡导致父组件的拖拽逻辑被误触发——子组件的鼠标事件会向上传递到父组件的拖拽监听区域，触发父组件的拖拽行为。

关键修复与实现步骤 #

1. 限定拖拽触发区并阻止事件冒泡 #

仅让组件的标题栏作为拖拽触发入口，在标题栏的mousedown事件中调用event.stopPropagation()，彻底阻止事件向上冒泡到父组件：

const handleTitleMouseDown = (e) => {
  // 阻止事件冒泡，避免父组件拖拽逻辑被触发
  e.stopPropagation();
  // 初始化当前组件的拖拽状态
  initDrag(e);
};

2. 维护层级化组件结构 #

用状态管理组件的嵌套关系，每次点击AddParent按钮时，将当前根组件包裹到新的可拖拽父组件中：

const [rootComp, setRootComp] = useState({
  id: 'init-child',
  children: [],
  content: '初始拖拽组件'
});

const addParent = () => {
  const newParent = {
    id: `parent-${Date.now()}`,
    children: [rootComp],
    content: ''
  };
  setRootComp(newParent);
};

3. 限制拖拽范围在父组件内部 #

拖拽时计算父组件的可视边界，确保子组件只能在父组件区域内移动，避免超出范围：

const handleMouseMove = (e) => {
  if (!isDragging) return;
  const parentEl = currentCompRef.current.parentElement;
  const parentRect = parentEl.getBoundingClientRect();
  const compRect = currentCompRef.current.getBoundingClientRect();

  // 计算可移动的极值，限制在父组件内
  const maxX = parentRect.width - compRect.width;
  const maxY = parentRect.height - compRect.height;
  const newX = Math.max(0, Math.min(e.clientX - dragStartX, maxX));
  const newY = Math.max(0, Math.min(e.clientY - dragStartY, maxY));

  setPosition({ x: newX, y: newY });
};

完整组件示例（React） #

import { useState, useRef, useEffect } from 'react';

const Draggable = ({ comp }) => {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const compRef = useRef(null);
  const dragStart = useRef({ x: 0, y: 0 });
  const isDragging = useRef(false);

  useEffect(() => {
    const onMouseMove = (e) => {
      if (!isDragging.current) return;
      const parentEl = compRef.current.parentElement;
      const parentRect = parentEl.getBoundingClientRect();
      const compRect = compRef.current.getBoundingClientRect();

      const maxX = parentRect.width - compRect.width;
      const maxY = parentRect.height - compRect.height;
      const newX = Math.max(0, Math.min(e.clientX - dragStart.current.x, maxX));
      const newY = Math.max(0, Math.min(e.clientY - dragStart.current.y, maxY));

      setPos({ x: newX, y: newY });
    };

    const onMouseUp = () => {
      isDragging.current = false;
    };

    if (isDragging.current) {
      window.addEventListener('mousemove', onMouseMove);
      window.addEventListener('mouseup', onMouseUp);
    }

    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);
    };
  }, [isDragging.current]);

  const onTitleDown = (e) => {
    e.stopPropagation();
    isDragging.current = true;
    dragStart.current = {
      x: e.clientX - pos.x,
      y: e.clientY - pos.y
    };
  };

  return (
    <div
      ref={compRef}
      style={{
        position: 'absolute',
        left: `${pos.x}px`,
        top: `${pos.y}px`,
        width: '220px',
        height: '160px',
        border: '1px solid #ccc',
        backgroundColor: '#f5f5f5'
      }}
    >
      {/* 仅标题栏可拖拽 */}
      <div
        style={{
          padding: '8px 12px',
          backgroundColor: '#e0e0e0',
          cursor: 'move',
          userSelect: 'none'
        }}
        onMouseDown={onTitleDown}
      >
        {comp.id} - 拖拽标题
      </div>
      <div style={{ padding: '16px', position: 'relative', height: 'calc(100% - 40px)' }}>
        {comp.children.map(child => (
          <Draggable key={child.id} comp={child} />
        ))}
        {!comp.children.length && <div>{comp.content}</div>}
      </div>
    </div>
  );
};

const App = () => {
  const [rootComp, setRootComp] = useState({
    id: 'init-child',
    children: [],
    content: '初始拖拽组件'
  });

  const addParent = () => {
    const newParent = {
      id: `parent-${Date.now()}`,
      children: [rootComp],
      content: ''
    };
    setRootComp(newParent);
  };

  return (
    <div style={{ padding: '24px' }}>
      <button onClick={addParent} style={{ marginBottom: '20px', padding: '8px 16px' }}>
        AddParent
      </button>
      <div
        style={{
          position: 'relative',
          width: '640px',
          height: '480px',
          border: '2px solid #333',
          backgroundColor: '#fff'
        }}
      >
        <Draggable comp={rootComp} />
      </div>
    </div>
  );
};

export default App;

效果说明 #

• 仅点击组件的标题栏可触发拖拽，子组件拖拽时父组件不会同步移动
• 每次点击AddParent，当前所有组件会被包裹到新的可拖拽父组件中
• 所有组件只能在其父组件的可视区域内移动，不会超出边界

内容的提问来源于stack exchange，提问作者akkad