React 中 div 元素的 onDrop 事件失效的完整解决方案

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

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

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

你当前的代码中，<div> 元素已绑定 onDrop、onDragEnter 和 onDragLeave，但完全缺失 onDragOver 处理器 —— 这正是 handleDrop 从不执行的核心原因。

只需为每个可投放区域（即 onDrop 所在的 <div>）添加如下 onDragOver 属性：

听脑AI

听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。

下载

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

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

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

// 在 TODO 列的 card div 中（原代码第 48 行附近）
<div
  key={card.id}
  className="card"
  draggable={true}
  onDragStart={(e) => 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}
</div>

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

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

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

• onDragOver 必须作用于 onDrop 的同一元素：不能只加在父容器上（如 .list），除非你希望整个列表区域接受投放。当前需求是卡片级投放，因此必须加在每个 card <div> 上。
• 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) => (
    <div
      key={card.id}
      className="card"
      draggable
      onDragStart={(e) => {
        e.dataTransfer.setData('id', String(card.id));
      }}
      onDragEnter={() => handleDragEnter(card.id)}
      onDragLeave={handleDragLeave}
      onDragOver={(e) => e.preventDefault()} // ✅ 核心修复
      onDrop={(e) => handleDrop(e, 'TODO')}
    >
      {card.title}
    </div>
  ))}

? 总结

遵循以上修正，你的 React 原生拖放功能即可稳定工作——无需任何第三方库，语义清晰，易于维护。