17370845950

drop事件不触发是因为未阻止dragover的默认行为；浏览器默认禁用drop，必须在dragover中调用preventDefault()才能启用drop。

JavaScript 实现拖放功能，核心是正确绑定和处理 dragstart、dragover、drop 这三个事件；漏掉 dragover 的默认行为阻止，drop 就永远不会触发。

为什么 drop 事件不触发？

浏览器对 drop 有默认拦截机制：除非显式阻止 dragover 的默认行为，否则即使绑了 drop 监听器也不会执行。

• dragstart：在被拖拽元素上触发，必须在此设置 dataTransfer.setData()，否则无数据可传
• dragover：在目标区域持续触发，必须调用 event.preventDefault()，否则 drop 被禁用
• drop：用户松手时触发，此时才能读取 dataTransfer.getData() 并执行实际逻辑

dataTransfer 的关键用法和限制

dataTransfer 是拖放过程中的数据载体，但只支持字符串类型，且仅在同源页面间可靠传输；跨域或跨窗口时可能为空。

• 只能用 setData('text/plain', 'some-value') 或 setData('text/html', ...)，不支持对象或 JSON 直传
• 读取时需用相同 MIME 类型：比如 getData('text/plain')，类型不匹配返回空字符串
• 拖拽文件时可用 event.dataTransfer.files（FileList），但这是特例，不走 setData/getData

如何让元素变成可拖拽的？

不是所有元素默认可拖，需手动设置 draggable="true" 属性，否则 dragstart 根本不会触发。

 拖我
放这里

注意：移动端不支持原生 drag/drop 事件，需要额外用 touchstart/touchmove 模拟，而且 dataTransfer 在 iOS Safari 中长期不可靠——这点常被忽略，上线前务必真机验证。