drop事件不触发是因为目标元素未监听dragover并调用e.preventDefault()，这是浏览器启用投放许可的唯一前提；仅监听drop而忽略dragover会导致静默失败。
拖放功能在 JavaScript 中不是靠单个 API 实现的，而是由 dragstart、dragover、drop 等一整套事件协同完成；不阻止默认行为，drop 事件根本不会触发。
为什么 drop 事件不触发？
浏览器对 drop 有严格前提：目标元素必须监听 dragover 并调用 e.preventDefault()。否则，即使绑了 drop，它也永远不会执行。
-
dragover是唯一能“开启投放许可”的事件，缺它或漏掉preventDefault，整个拖放链就断了 - 只监听
drop不监听dragover，控制台不会报错，但行为静默失败 - 若目标是
<div>等非可编辑元素，默认禁止投放，必须显式拦截dragover
如何在 dragstart 中传数据？
dataTransfer 是唯一合法的数据载体，但它只支持字符串类型，且 MIME 类型会影响后续读取方式。
- 用
e.dataTransfer.setData('text/plain', 'item-123')写入最通用，兼容所有目标 - 写入自定义类型如
'application/json'后，在drop中需用e.dataTransfer.getData('application/json')精确匹配才能读出 - 不要试图塞对象或数组进去——
setData会自动转成字符串，JSON 序列化得手动做：e.dataTransfer.setData('text/plain', JSON.stringify({id: 1, type: 'card'})) - 浏览器可能忽略未声明的 MIME 类型，稳妥起见优先用
'text/plain'或'text/uri-list'
怎样让拖拽视觉反馈更自然？
仅靠事件不够，需配合 CSS 和 dataTransfer.effectAllowed / dropEffect 控制光标和行为语义。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“Java免费学习笔记（深入）”；
- 在
dragstart设置e.dataTransfer.effectAllowed = 'move'（可选值：'copy'、'link'、'move'、'all'） - 在
dragover中根据业务逻辑设e.dataTransfer.dropEffect = 'move'，否则光标可能显示为禁止符号 - 用
:active或[draggable="true"]::after做拖拽中样式不靠谱——应监听dragstart添加类，dragend清除 - Firefox 对
dataTransfer.setDragImage()支持最完整，Chrome/Safari 需传入真实 DOM 元素（不能是伪元素），且尺寸建议 ≤ 128×128px
drop 里怎么安全读取并处理数据？
别假设 getData() 一定返回东西——用户可能从外部拖入文件、链接或纯文本，来源不可控。
- 先检查
e.dataTransfer.types数组，判断有哪些可用类型，再决定用哪个 key 调getData() - 对文件拖放，要用
e.dataTransfer.files（FileList），不是getData()；对 URL，优先试getData('text/uri-list') - 从网页内拖拽时，
getData('text/plain')最可能有值；但若源端没调setData，这里就是空字符串 - 避免在
drop中直接操作e.target的子节点结构——它可能是文字节点或不可变元素，应明确操作预期容器（如父级ul）
真正麻烦的从来不是绑几个事件，而是应对跨源拖拽、移动端兼容、焦点管理、键盘辅助（如按 Space 触发拖拽）这些边界情况；dataTransfer 的类型匹配和 preventDefault 的时机，稍错一点，整个流程就卡死无声。
