使用dnd-kit时handleDragEnd中event.over返回null的问题求助

以下是针对你遇到问题的常见排查点和修复方案：

1. 检查useDroppable的accept与拖拽元素的type是否匹配 #

拖拽元素（使用useDraggable）的type必须和可放置区域（useDroppable）的accept完全一致，否则无法识别为可放置目标。

错误示例：

// 拖拽元素
const { attributes, listeners, setNodeRef } = useDraggable({
  id: 'drag-item-1',
  type: 'task' // 类型为task
});

// 可放置区域
const { setNodeRef: dropNodeRef } = useDroppable({
  id: 'drop-area-1',
  accept: 'card' // 接受类型为card，和拖拽类型不匹配
});

正确示例：

// 拖拽元素
const { attributes, listeners, setNodeRef } = useDraggable({
  id: 'drag-item-1',
  type: 'task'
});

// 可放置区域
const { setNodeRef: dropNodeRef } = useDroppable({
  id: 'drop-area-1',
  accept: 'task' // 类型匹配
});

2. 确认nodeRef正确绑定到DOM元素 #

确保useDroppable返回的setNodeRef（或你自定义的nodeRef）正确绑定到可放置区域的根DOM节点上，不能绑定到未转发ref的React组件。

正确绑定方式：

function DropArea() {
  const { setNodeRef, isOver } = useDroppable({
    id: 'drop-area-1',
    accept: 'task'
  });

  return (
    <div 
      ref={setNodeRef} // 直接绑定到根div的ref
      style={{ 
        border: isOver ? '2px dashed blue' : '2px solid gray',
        padding: '20px',
        margin: '10px'
      }}
    >
      可放置区域
    </div>
  );
}

3. 确保所有拖拽/可放置组件被DndContext包裹 #

DndContext是dnd-kit的核心上下文，必须包裹所有使用useDraggable和useDroppable的组件，否则拖拽系统无法正常工作。

示例结构：

import { DndContext } from '@dnd-kit/core';

function App() {
  const handleDragEnd = (event) => {
    if (event.over) {
      // 处理放置逻辑
      console.log('放入区域:', event.over.id);
    }
  };

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <DraggableItem />
      <DropArea />
      <DropArea />
    </DndContext>
  );
}

4. 检查handleDragEnd的参数获取是否正确 #

确保你正确访问event对象的over属性，避免解构时遗漏：

// 正确写法
const handleDragEnd = (event) => {
  console.log(event.over); // 直接访问event.over
  if (event.over) {
    // 执行放置逻辑
  }
};

// 错误写法（提前解构时漏了over）
const handleDragEnd = ({ active }) => {
  // 此处无法获取over，自然为undefined
};

5. 排查层级遮挡或样式问题 #

如果可放置区域被其他元素遮挡（z-index过低），或设置了pointer-events: none，会导致dnd-kit无法识别目标。检查可放置区域的CSS：

• 移除pointer-events: none样式
• 调整z-index确保区域不被覆盖

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