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 属性：
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>
))}? 总结
| 问题 | 原因 | 解决方案 |
|---|---|---|
| onDrop 不触发 | 浏览器默认阻止未声明 dragover 的 drop 行为 | 为 onDrop 元素添加 onDragOver={(e) => e.preventDefault()} |
| 拖拽视觉反馈弱 | 缺少 onDragEnter/onDragLeave 样式控制 | 已实现，可配合 CSS 添加 :hover 或 draggedOver 类增强体验 |
| 拖拽源识别不稳定 | ref 复用冲突 | 改用 dataTransfer.setData() 传递数据，解耦 DOM 引用 |
遵循以上修正，你的 React 原生拖放功能即可稳定工作——无需任何第三方库，语义清晰，易于维护。
