ondrop事件不触发的根本原因是未在ondragover中调用e.preventDefault()；浏览器默认阻止drop行为，必须在拖动过程中高频触发的ondragover阶段显式取消默认行为，否则ondrop将被静默忽略。
ondrop 事件本身不处理拖放逻辑，它只是“松手那一刻”的触发点；真正起作用的是你是否在 ondragover 中调用了 event.preventDefault() —— 没这一步，ondrop 根本不会触发。
为什么写了 ondrop 却没反应？
这是最常踩的坑：浏览器对 drop 事件有默认行为（比如把拖进来的文件当作链接打开、把文本粘贴为超链接），所以必须显式阻止。而这个阻止动作不能只写在 ondrop 里，得提前在 ondragover 阶段完成。
-
ondrop触发前，浏览器会先高频触发ondragover（约每 350ms 一次） - 只要任意一次
ondragover没调用event.preventDefault()，后续的ondrop就会被静默忽略 - 即使你给目标元素加了
draggable="true"或写了ondrop="handleDrop()"，没配ondragover也白搭
dataTransfer.getData() 取不到数据？检查 setData 的类型和大小写
dataTransfer.getData() 必须和 dataTransfer.setData() 使用**完全一致的 MIME 类型字符串**，包括大小写和空格。常见错误是：
- 源端写
ev.dataTransfer.setData("text/plain", "abc")，目标端却用getData("Text")→ 返回空字符串 - 源端用
"application/json"，目标端漏写application/前缀 → 取不到 - 跨域拖拽时，只有
"text/plain"和"text/html"被多数浏览器允许读取，其他类型会被屏蔽
addEventListener("drop", ...) 和 ondrop 属性的区别
两者都能绑定，但行为不同：
立即学习“前端免费学习笔记（深入）”；
-
element.ondrop = function() {...}：只能绑定一个处理器，后赋值会覆盖前一个 -
element.addEventListener("drop", handler)：支持多个监听器共存，推荐用于复杂逻辑或第三方库集成 - 注意 IE8 及更早版本不支持
addEventListener，但当前已基本可忽略该兼容性问题
drop 事件里的 event.target 是谁？
不是被拖的元素，而是**鼠标松开时所在的那个 DOM 元素** —— 它可能和你预期的放置区域不一致，尤其当目标区域有 padding、子元素遮挡或 CSS transform 时。
- 如果目标是
<div class="drop-zone"><p>内容</p></div>，松手在<p>上，则event.target是p元素，不是外层div - 建议统一用
event.currentTarget（即绑定事件的那个元素），或提前用closest(".drop-zone")定位容器 - 避免直接操作
event.target.appendChild(...)，否则可能把拖拽元素插到不该插的位置
真正麻烦的从来不是 ondrop 本身，而是它依赖的整个拖放链条：draggable 属性、dragstart 数据设置、dragover 的 preventDefault、以及 drop 时对 event.target 的准确判断。漏掉任一环，就卡在“明明写了却没反应”上。
