draggable="true"仅开启可拖拽状态，不自动触发拖拽逻辑；必须配合dragstart、dragover（需preventDefault）、drop等事件及dataTransfer操作才能实现完整拖放功能。
draggable 属性设为 true 就能拖拽？不一定
HTML5 原生 draggable 属性只是开启“可拖拽状态”的开关，它本身不触发任何拖拽逻辑，也不自动绑定事件。很多开发者设了 draggable="true" 却发现元素拖不动，根本原因是没监听和处理 dragstart、dragover、drop 等关键事件。
浏览器默认会阻止 drop 事件（防止随意接收拖入内容），所以即使目标区域设置了 draggable="true"，也必须显式调用 event.preventDefault() 才能接受拖放。
如何正确启用一个可拖拽的 <div>
以最简场景为例：让一个 <div> 可拖，拖到另一个 <div> 中释放：
-
draggable="true"必须加在被拖动的元素上（如源<div>），目标容器不需要这个属性 - 必须监听源元素的
dragstart事件，并通过dataTransfer.setData()指定传输数据（哪怕只是占位字符串） - 目标容器需监听
dragover并调用event.preventDefault()，否则drop不会触发 - 目标容器还需监听
drop事件，从中读取dataTransfer.getData()并做实际操作（如移动 DOM 节点）
<div id="source" draggable="true">拖我</div>
<div id="target">拖到这里</div>
<script>
const source = document.getElementById('source');
const target = document.getElementById('target');
source.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'dummy');
});
target.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键：允许 drop
});
target.addEventListener('drop', (e) =>
e.preventDefault(),
target.appendChild(source)
);
</script>
常见错误：为什么拖着拖着就“卡住”或“复制失败”
典型表现是拖拽过程中光标变成“禁止”符号（圆圈斜杠），或松手后什么也没发生。问题往往出在以下几点：
立即学习“前端免费学习笔记（深入）”；
- 漏写
dragover中的e.preventDefault()—— 这是最常见的原因 - 在
dragstart中没调用setData()，或传了空字符串（部分浏览器如 Safari 会拒绝空数据） - 目标容器是空的、高度为 0，或被
overflow: hidden/pointer-events: none阻断了事件捕获 - 用了 CSS
user-select: none但没配-webkit-user-drag: element（Safari 下拖拽图标可能不显示）
移动端和框架里的注意事项
原生 draggable 在 iOS 和 Android 上基本不可用（iOS 完全禁用，Android 行为不一致），不能依赖它做移动拖拽交互。React/Vue 等框架中，直接操作 draggable 属性容易被虚拟 DOM 覆盖，推荐用 ref + addEventListener 显式绑定，或改用 react-dnd、vue-draggable 等封装库。
另外，draggable 的值支持 "true"、"false"、"auto"，其中 "auto" 表示由浏览器决定（如图片、链接默认可拖，文本不可拖），但行为不可控，生产环境应始终显式设为 "true" 或 "false"。
