如何通过设置_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 根本不会触发。