React嵌套可拖拽Div问题求助：实现多层父容器拖拽功能

问题分析 #

当前实现存在两个关键问题：

1. 拖拽子组件时父容器跟着移动：这是事件冒泡导致的，子组件的拖拽事件向上传递触发了父容器的拖拽监听逻辑；
2. 顶层组件无法向下拖拽：大概率是顶层组件的拖拽范围约束逻辑错误，没有正确基于父容器（或视口）的边界计算可拖拽区域。

具体解决方案 #

1. 阻止拖拽事件冒泡，避免父组件联动

在子组件的拖拽起始事件（dragstart或自定义拖拽触发事件）中，调用event.stopPropagation()，切断事件向上传递的路径，确保只有当前拖拽组件的监听逻辑生效：

// 子组件拖拽起始处理函数
const handleDragStart = (e) => {
  e.stopPropagation(); // 关键：阻止事件冒泡到父容器
  // 初始化拖拽状态（记录初始位置、设置拖拽标识）
  isDragging.current = true;
  startPosition.current = { x: e.clientX, y: e.clientY };
};

2. 修正顶层组件的拖拽范围约束

确保顶层组件的拖拽位置严格限制在其父容器（或视口）的边界内，计算新位置时做边界校验：

// 拖拽过程中的位置更新函数
const handleDragMove = (e) => {
  if (!isDragging.current) return;
  
  const parentEl = parentRef.current;
  const currentEl = currentRef.current;
  const parentRect = parentEl.getBoundingClientRect();
  const elRect = currentEl.getBoundingClientRect();
  
  // 计算偏移量
  const offsetX = e.clientX - startPosition.current.x;
  const offsetY = e.clientY - startPosition.current.y;
  
  // 计算新的相对位置，并限制在父容器范围内
  const newTop = Math.max(0, Math.min(
    currentEl.offsetTop + offsetY,
    parentRect.height - elRect.height
  ));
  const newLeft = Math.max(0, Math.min(
    currentEl.offsetLeft + offsetX,
    parentRect.width - elRect.width
  ));
  
  // 更新组件位置
  currentEl.style.top = `${newTop}px`;
  currentEl.style.left = `${newLeft}px`;
  
  // 更新起始位置，确保下一次计算连续
  startPosition.current = { x: e.clientX, y: e.clientY };
};

3. 优化AddParent按钮的父容器添加逻辑

添加父容器时，需要将原有组件的绝对位置转换为相对新父容器的位置，避免位置错乱：

const addParentContainer = () => {
  const currentEl = currentRef.current;
  const currentRect = currentEl.getBoundingClientRect();
  
  // 创建新的父拖拽容器
  const parentContainer = document.createElement('div');
  parentContainer.className = 'draggable-container';
  parentContainer.style.position = 'absolute';
  parentContainer.style.top = `${currentRect.top}px`;
  parentContainer.style.left = `${currentRect.left}px`;
  parentContainer.style.width = `${currentRect.width + 40}px`; // 预留内边距
  parentContainer.style.height = `${currentRect.height + 40}px`;
  parentContainer.style.border = '2px dashed #ccc';
  
  // 转换子组件位置为相对父容器的坐标
  currentEl.style.position = 'absolute';
  currentEl.style.top = '20px';
  currentEl.style.left = '20px';
  
  // 插入DOM并绑定拖拽逻辑
  document.body.appendChild(parentContainer);
  parentContainer.appendChild(currentEl);
  bindDragEvents(parentContainer); // 给新父容器绑定拖拽监听
};

关键注意事项 #

• 所有拖拽组件必须设置position: absolute，父容器设置position: relative，确保相对定位关系正确；
• 拖拽事件监听需绑定在mousedown/touchstart（起始）、mousemove/touchmove（过程）、mouseup/touchend（结束）三个阶段；
• 每次添加父容器后，需重新校验子组件的位置约束，避免超出新父容器范围。

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