17370845950

关键事件共6个：dragstart（必须设dataTransfer）、drag（可忽略）、dragend（拖拽结束）、dragenter（必须preventDefault）、dragover（必须preventDefault）、drop（执行业务逻辑）。

JavaScript 实现拖放功能不难，但默认行为干扰多、浏览器兼容细节多，直接用原生 drag / drop 事件链最容易出错——比如拖着没反应、松手不触发 drop、或被浏览器默认下载/导航劫持。

哪些事件必须监听？顺序和作用是什么

拖放是多阶段事件流，缺一不可。关键事件共 6 个，按实际触发顺序排列：

• dragstart：拖拽开始，**必须在这里设置 dataTransfer，否则后续 drop 拿不到数据**
• drag：持续触发（可忽略）
• dragend：拖拽结束（无论是否成功释放）
• dragenter：首次进入目标区域，**必须调用 event.preventDefault()，否则 dragover 和 drop 不会触发**
• dragover：持续触发（类似 drag），**也必须 preventDefault()，否则无法释放到目标上**
• drop：松手释放，此时才能读取 dataTransfer 并执行业务逻辑

漏掉任意一个 preventDefault()（尤其 dragenter 和 dragover），drop 就永远不会来。

为什么 drop 事件拿不到 dataTransfer.files 或自定义数据

根本原因是 dataTransfer 的写入只在 dragstart 阶段有效，且不同数据类型有不同写法：

立即学习“Java免费学习笔记（深入）”；

• 文本：用 setData('text/plain', 'hello')
• HTML 片段：用 setData('text/html', 'hi')
• 文件对象（如 选中的）：不能直接塞进 setData，需用 setDragImage() + 自定义属性模拟，或改用 FileList 通过 dataTransfer.items 传递（仅限本地文件拖入页面）
• 自定义数据（如元素 ID）：推荐用 setData('text/plain', element.id)，简单可靠

注意：dataTransfer.getData() 只能读取同类型、且在 dragstart 中明确 setData 过的内容；未设置的类型返回空字符串。

如何让任意元素（非链接/图片）支持拖拽

默认只有 、 等少数元素可拖拽。要让 、

拖我

document.getElementById('item-1').addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', 'item-1');
  // 可选：隐藏拖拽时的半透明影子
  e.dataTransfer.setDragImage(new Image(), 0, 0);
});