HTML5拖拽如何开启draggable属性

• draggable="true" 必须加在被拖动的元素上（如源
  ），目标容器不需要这个属性
• 必须监听源元素的 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"。

理论要掌握，实操不能落！以上关于《HTML5拖拽如何开启draggable属性》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！