react 中 `ondrop` 事件在 `
` 上不触发，根本原因是浏览器默认阻止了 `dragover` 事件的默认行为，导致后续 `drop` 无法触发；必须显式添加 `ondragover` 并调用 `e.preventdefault()` 才能启用拖放目标功能。
在原代码中，你已正确绑定了 onDragStart、onDragEnter、onDragLeave 和 onDrop，但遗漏了关键的 onDragOver 处理函数。根据 HTML5 拖放规范，一个元素要成为有效的拖放目标（即能接收 drop 事件），必须：
- 阻止 dragover 事件的默认行为（e.preventDefault()）；
- （可选但推荐）设置 e.dataTransfer.dropEffect 以明确视觉反馈。
✅ 正确做法是在每个可接收拖入的
容器上添加 onDragOver，而非仅在卡片（
）上——因为你的目标是将卡片拖入“列表区域”（TODO 或 COMPLETED 列），而不是拖到另一个卡片上。
以下是修复后的关键修改（仅展示需调整的部分）：
<div className="list todo"
onDragOver={(e) => e.preventDefault()} // ✅ 必须添加！
onDrop={(e) => handleDrop(e, 'TODO')}>
<h2>TODO</h2>
{cards
.filter((c) => c.list === 'TODO')
.map((card) => (
<div
key={card.id}
className="card"
draggable={true}
onDragStart={(e) => handleDragStart(e, card.id)}
// 注意：此处移除卡片上的 onDrop/onDragOver —— 它们不是 drop 目标
>
{card.title}
</div>
))}
</div>
<div className="list completed"
onDragOver={(e) => e.preventDefault()} // ✅ 同样必须添加
onDrop={(e) => handleDrop(e, 'COMPLETED')}>
<h2>COMPLETED</h2>
{cards
.filter((c) => c.list === 'COMPLETED')
.map((card) => (
<div
key={card.id}
className="card"
draggable={true}
onDragStart={(e) => handleDragStart(e, card.id)}
>
{card.title}
</div>
))}
</div>⚠️ 重要注意事项：
- onDragOver 必须绑定在实际接受拖放的容器上（即 .list），而非 .card —— 否则 drop 会发生在卡片内部，逻辑混乱且易触发嵌套干扰；
- onDragOver 中仅需 e.preventDefault()，无需其他逻辑（如 setData），它纯粹是“声明该区域可接收拖放”的信号；
- 原代码中卡片上的 onDrop、onDragEnter、onDragLeave 应全部移除，避免事件冒泡冲突和误触发；
- 若需高亮当前拖入区域（如加边框），可在 onDragEnter / onDragLeave 中配合状态控制样式（如 draggedOverList: 'TODO'），但注意 onDragEnter 必须也绑定在 .list 容器上；
- ref={dragItem} 不应放在多个动态渲染的卡片上（会覆盖），建议移除或改用事件委托方式管理拖拽源。
? 总结：HTML5 拖放是“三步协议”——dragstart → dragover（必须 preventDefault）→ drop。缺一不可。React 中只需确保目标容器拥有 onDragOver={(e) => e.preventDefault()}，即可让 onDrop 稳定触发。无需第三方库，纯原生能力即可实现健壮的看板式拖放交互。
