React开发类Trello HTML5拖拽看板，如何排除被拖拽列表获取其下方目标Slot容器

核心问题 #

当前拖拽逻辑存在两个卡点：

• 被拖拽的列表元素始终处于鼠标坐标的最上层，导致document.elementFromPoint无法拾取到被遮挡的下层列表槽容器
• 拖拽过程通过修改元素的top/left属性实现，没有改动DOM父节点结构，无法通过父节点回溯定位原本的挂载容器

核心解决思路 #

最简洁无冗余的方案是临时实现点击穿透，不需要写复杂的元素排除逻辑：

• 拖拽激活时，临时给被拖拽的列表元素设置pointer-events: none，鼠标事件会直接穿透到下层的槽容器上，此时调用elementFromPoint获取到的就是真正的目标容器
• 拖拽结束（鼠标松开）时，再把被拖拽列表的pointer-events恢复为默认值，避免后续交互失效

结合现有代码的关键调整点 #

• 不要把mousemove/mouseup监听绑定在拖拽的列表元素上：开启pointer-events后列表本身无法接收鼠标事件，会导致拖拽流程中断，这类全局鼠标监听必须挂载在document对象上
• 给每个列表槽加稳定的标识属性（比如data-slot），向上查找目标容器时不用靠id字符串匹配，兼容槽内部嵌套其他子元素的场景
• 修复现有代码中的bug：两个Slot组件目前共用同一个id="slot_1"，实际使用时要给每个槽配置唯一id，避免元素定位混乱

核心代码参考 #

// 全局公共变量：存储拖拽的偏移量
let offsetX = 0, offsetY = 0;

// 查找最近的列表槽容器的工具函数
const findClosestSlot = (el) => {
  while (el && el !== document.body) {
    // 匹配带data-slot属性的槽元素
    if (el.hasAttribute('data-slot')) return el;
    el = el.parentElement;
  }
  return null;
}

// 全局鼠标移动处理
const handleGlobalMouseMove = (e) => {
  if (mousedown === 0) return;
  // 实时更新拖拽元素的位置
  setepostiontype("absolute");
  setetop(e.pageY - offsetY);
  seteleft(e.pageX - offsetX);
}

// 全局鼠标松开处理
const handleGlobalMouseUp = (e) => {
  if (mousedown === 0) return;
  // 因为拖拽元素已经穿透，这里拿到的就是下层目标元素
  const targetUnderMouse = document.elementFromPoint(e.clientX, e.clientY);
  // 向上找到对应的槽容器
  const targetSlot = findClosestSlot(targetUnderMouse);
  
  // 在这里执行列表挂载到目标槽的逻辑
  
  // 恢复拖拽元素的鼠标事件
  const dragEl = document.getElementById('List_1');
  dragEl.style.pointerEvents = '';
  // 移除全局监听
  document.removeEventListener('mousemove', handleGlobalMouseMove);
  document.removeEventListener('mouseup', handleGlobalMouseUp);
  change_mouse_status(0);
}

// 列表元素的鼠标按下处理
const handleListMouseDown = (e) => {
  const dragEl = e.currentTarget;
  offsetX = e.clientX - dragEl.getBoundingClientRect().left;
  offsetY = e.clientY - dragEl.getBoundingClientRect().top;
  // 关键：开启点击穿透
  dragEl.style.pointerEvents = 'none';
  // 绑定全局监听
  document.addEventListener('mousemove', handleGlobalMouseMove);
  document.addEventListener('mouseup', handleGlobalMouseUp);
  change_mouse_status(1);
}

注意事项 #

• 开启pointer-events: none的状态必须仅持续拖拽过程，拖拽结束后一定要恢复，否则列表后续会无法响应点击、hover等交互
• 相比递归遍历父节点、手动排除拖拽元素的逻辑，点击穿透的方案没有层级判断遗漏的问题，性能也更优

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