drop事件未触发的根本原因是浏览器默认禁止投放，必须在dragover事件中调用preventDefault()以显式允许投放；仅在drop中阻止默认行为已失效。
JavaScript 原生拖放（Drag and Drop）API 表面简单，实际容易卡在 dragover 阻止默认行为、dataTransfer 类型不匹配、或跨元素/跨 iframe 失效上。核心不是“能不能拖”，而是“浏览器什么时候允许你放”。
为什么 drop 事件根本没触发？
这是最常见卡点：浏览器默认禁止任何元素接收拖放，除非你显式告诉它“可以放”。关键在于 dragover 事件必须调用 event.preventDefault()，否则 drop 永远不会触发。
-
dragenter和dragover都要监听，但只有dragover必须阻止默认行为（preventDefault），否则拖入目标区域时鼠标会显示“禁止”图标 - 不能只在
drop里阻止默认——太晚了，浏览器已经拒绝了投放 - 如果目标是
contenteditable元素或input，需额外处理焦点和选区干扰
dataTransfer.setData() 的类型必须和 getData() 严格一致
浏览器按 MIME 类型区分数据，不是靠变量名或结构。传 "text/plain"，取时也得用 "text/plain"；传 "application/json"，取错成 "text/plain" 就返回空字符串。
- 常用安全类型：
"text/plain"（纯文本）、"text/uri-list"（URL 列表）、"text/html"（HTML 片段） - 自定义类型如
"application/x-myapp-item-id"可用于内部识别，但跨域或跨应用无效 -
dataTransfer.effectAllowed和dropEffect仅影响光标样式，不影响数据传递本身
如何拖动非可拖元素（比如 div）？
默认只有 img、a、表单控件等少数元素原生可拖。要拖任意元素，必须设置 draggable="true" 属性，并手动绑定 dragstart 事件。
- HTML 中加：拖我
- JS 中在
dragstart里设数据：event.dataTransfer.setData("text/plain", event.target.dataset.id) - 注意：CSS 的
user-select: none或pointer-events: none会干扰拖动起始，慎用
移动端和 Safari 的兼容性陷阱
iOS Safari 和 Android Chrome 对原生 DnD 支持极弱——dragstart 可能不触发，drop 几乎不可靠。这不是 bug，是设计限制：触摸场景下没有“悬停”概念，dragover 无法稳定触发。
- 生产环境涉及移动设备，必须降级为
touchstart/touchmove+ 位置计算模拟拖放 - Safari 15.4+ 才开始支持
dataTransfer.items，旧版只能依赖setData/getData - iframe 内拖放需确保同源，且父页面也要监听并透传事件
真正难的从来不是写那几行 addEventListener，而是理解浏览器对“投放许可”的逐帧判定逻辑——它不看你代码多漂亮，只看你每一帧有没有在 dragover 里说“我准备好了”。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
