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