如何通过设置_draggable属性和监听事件实现网页元素的拖放功能？

本文共计954个文字，预计阅读时间需要4分钟。

设置 draggable=true

常见错误是只加了 draggable="true" 就以为拖放能用了——结果拖不动、没反应、或者松手后啥也没发生。这是因为缺了关键的事件绑定和 dataTransfer 操作。

• draggable="false"（默认）：元素不可拖，即使监听了 dragstart 也不会触发
• draggable="true"：仅启用原生拖拽 UI 行为（光标变+号、半透明拖影），但无数据、无目标判定
• draggable="auto"：由浏览器按元素类型决定（如图片、链接默认可拖，div 默认不可拖）

必须监听 dragstart、dragover、drop 这三个核心事件

拖放交互依赖三步闭环：dragstart（开始拖）、dragover（拖入目标区）、drop（松手投放）。漏掉任意一个，流程就断了。

特别注意 dragover：它默认被浏览器阻止（防止页面被随意拖文件进来），必须在事件回调里显式调用 event.preventDefault()，否则 drop 根本不会触发。

• dragstart：在这里用 event.dataTransfer.setData(format, data) 存入要传递的数据（如 "text/plain" 或自定义 "application/json"）
• dragover：只做 event.preventDefault() 即可，别忘了加；也可在此设置 event.dataTransfer.dropEffect = "move" 控制光标样式
• drop：用 event.dataTransfer.getData(format) 取出数据，再执行插入、移动、复制等业务逻辑

drop 目标必须是容器元素，且需处理 event.target 和 event.currentTarget 的差异

当用户把元素拖进一个 div 并松手，event.target 很可能是该 div 内部的文本节点、子 span 或空格，而不是你绑事件的那个父容器。直接操作 event.target 容易报错或插错位置。

推荐统一用 event.currentTarget（即监听事件的 DOM 节点），或者用 event.target.closest(".drop-zone") 主动向上找目标容器。

• 避免对 event.target 直接调用 appendChild() 或 insertBefore()
• 如果目标区有内边距/滚动条，event.clientX/Y 坐标需转成相对于容器的偏移，才能精确定位插入点
• 移动端不支持原生 draggable，Safari iOS 甚至会忽略 dragstart；需要额外用 touchstart/move/end + transform 模拟

setData/getData 的 format 字符串必须严格匹配，大小写敏感

很多人卡在 getData("Text") 返回空字符串，其实是因为 setData("text/plain", "abc") 存的是小写 "text/plain"，而 "Text" 不匹配。浏览器不自动标准化 MIME 类型格式。

• 常用安全格式： "text/plain"、"text/html"、"application/json"
• 自定义格式如 "myapp/item-id" 也可以，但收发两端必须完全一致
• 不要依赖 dataTransfer.types 数组顺序，不同浏览器返回顺序可能不同；建议用 dataTransfer.types.includes("text/plain") 判断是否支持

拖放看着简单，真正落地时最常栽在 dragover 忘写 preventDefault、getData 和 setData 的 type 不一致、以及移动端完全失效这三点上。