React 中 div 元素的 onDrop 事件失效的完整解决方案_技术教程

react 中 `ondrop` 事件不触发，通常是因为缺少 `ondragover` 事件处理器（该事件必须显式调用 `e.preventdefault()`），导致浏览器默认阻止拖放行为。本文详解原因、修复步骤及可复用的拖放逻辑实现。

在 React 中实现原生 HTML5 拖放（Drag & Drop）时，onDrop 事件无法触发是最常见的“静默失败”问题之一。根本原因并非 React 特有，而是浏览器原生拖放规范的要求：只有当目标元素正确处理了 dragover 事件并调用 e.preventDefault() 时，drop 事件才会被触发；否则，浏览器会忽略 drop，且不报错、不警告。

✅ 正确做法：必须添加 onDragOver 并阻止默认行为

你当前的代码中，

元素已绑定 onDrop、onDragEnter 和 onDragLeave，但完全缺失 onDragOver 处理器 —— 这正是 handleDrop 从不执行的核心原因。

只需为每个可投放区域（即 onDrop 所在的

）添加如下 onDragOver 属性：

onDragOver={(e) => e.preventDefault()}

⚠️ 注意：e.preventDefault() 是强制必需的；仅声明 onDragOver 而不调用 preventDefault() 依然无效。

? 修复后的关键代码片段（仅展示修改部分）

// 在 TODO 列的 card div 中（原代码第 48 行附近）
 handleDragStart(e, card.id)}
  onDragEnter={() => handleDragEnter(card.id)}
  onDragLeave={handleDragLeave}
  onDragOver={(e) => e.preventDefault()} // ✅ 新增：启用 drop 的关键一步
  onDrop={(e) => handleDrop(e, 'TODO')} // 注意：此处目标是 'TODO'（从 COMPLETED 拖回）
  ref={dragItem}
>
  {card.title}

同理，在 COMPLETED 列的 card 中也需添加：

onDragOver={(e) => e.preventDefault()}

? 补充最佳实践与注意事项

onDragOver 必须作用于 onDrop 的同一元素：不能只加在父容器上（如 .list），除非你希望整个列表区域接受投放。当前需求是卡片级投放，因此必须加在每个 card 上。
e.preventDefault() 仅需在 onDragOver 中调用一次：无需在 onDragEnter 或 onDrop 中重复调用（onDrop 中的 preventDefault() 主要用于防止页面跳转等副作用，非启用 drop 所必需）。
ref={dragItem} 使用有误：你将 ref 绑定到了多个卡片元素上，而 useRef 只能持有单个引用。这会导致 dragItem.current 始终指向最后一个渲染的卡片。建议移除该 ref，或改用 data-* 属性标识拖拽源（更健壮）：
```
// 推荐替代方案：通过 data-id 读取 ID，避免 ref 冲突
onDragStart={(e) => {
  e.dataTransfer.setData('text/plain', ''); // 兼容性要求：至少设置一个格式
  e.dataTransfer.setData('id', String(card.id));
}}
```
兼容性提示：dataTransfer.setData('id', ...) 中的类型 'id' 是自定义类型，安全可用；但为确保跨浏览器兼容，建议同时设置标准类型（如 'text/plain'），尽管本例中非必需。

✅ 完整可运行的最小修正版 onDrop 区域示例

{cards
  .filter((c) => c.list === 'TODO')
  .map((card) => (
     {
        e.dataTransfer.setData('id', String(card.id));
      }}
      onDragEnter={() => handleDragEnter(card.id)}
      onDragLeave={handleDragLeave}
      onDragOver={(e) => e.preventDefault()} // ✅ 核心修复
      onDrop={(e) => handleDrop(e, 'TODO')}
    >
      {card.title}
    
  ))}

? 总结

问题	原因	解决方案
onDrop 不触发	浏览器默认阻止未声明 dragover 的 drop 行为	为 onDrop 元素添加 onDragOver={(e) => e.preventDefault()}
拖拽视觉反馈弱	缺少 onDragEnter/onDragLeave 样式控制	已实现，可配合 CSS 添加 :hover 或 draggedOver 类增强体验
拖拽源识别不稳定	ref 复用冲突	改用 dataTransfer.setData() 传递数据，解耦 DOM 引用