HTML draggable属性实现元素拖拽

很多开发者在尝试HTML5拖拽功能时，都会遇到这样的困惑：明明给元素加上了draggable="true"，光标也变成了拖拽样式，但就是拖不动，或者拖完没有任何响应。这里先给出一个重要结论——draggable属性只是一个开关，它表示"这个元素可以参与拖拽操作"，但真正让拖拽功能落地的是背后那一组事件处理机制。理解draggable属性与事件配合的关系，是掌握HTML5拖拽的关键。

为什么设置了 draggable="true" 却没有拖拽反应？

这种情况在实际开发中很常见：鼠标按住元素可以拖动，但松开后什么都没发生；或者拖到目标区域时，目标没有任何视觉反馈；又或者 drop 事件根本不触发。以下是导致HTML5拖拽失效的几类主要原因。

• 第一，也是最容易被忽略的——dragover 事件中没有调用 e.preventDefault()。浏览器默认不允许将拖拽元素放置到其他元素上，如果不调用这个方法，drop 事件根本不会触发，整个拖拽操作流程就会中断。
• 第二，dragstart 事件里没有设置数据。也就是说，虽然元素可以被拖动，但拖动的"内容"是空的，在 drop 时执行 e.dataTransfer.getData() 拿到的只能是空字符串，导致无法完成数据传递。
• 第三，某些元素天然不支持拖拽操作。比如 、 这类表单控件，即使加上 draggable="true"，浏览器依然会忽略其拖拽行为。
• 第四，移动端的兼容性问题。尤其是在 iOS Safari 上，依赖原生 draggable 属性常常会出现卡顿或完全失效的情况，这不是代码逻辑错误，而是浏览器本身的限制。

dragstart 事件必须设置 dataTransfer 数据

拖拽操作的核心在于"信息传递"。仅仅让元素可以拖动是没有意义的，关键是要告诉目标区域"你拖过来的是什么内容"。这个信息必须通过 dataTransfer 对象显式存储，才能完成后续的拖拽操作。

具体来说，有几个要点需要留意。推荐使用 "text/plain" 作为数据类型，兼容性最好；虽然 "Text" 这种旧写法在现代浏览器上也能使用，但不推荐继续沿用。存储的值可以是元素的 ID、序列化后的 JSON 字符串，甚至是 base64 编码的图片数据——但需要注意，不能直接存储 DOM 节点对象。如果涉及多个元素的拖拽排序，可以在 dragstart 中通过 dataTransfer.effectAllowed 来控制光标样式，指定是 "move" 还是 "copy" 操作。

一个典型的draggable属性用法如下：

source.addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', e.target.dataset.itemId || e.target.id);
  e.dataTransfer.effectAllowed = 'move';
});

dragover 与 drop 的协作要点

dragover 的作用不仅仅是"悬停时触发一段逻辑"，它更像是浏览器判断"这个位置是否允许放置"的闸门。drop 才是真正执行投放逻辑的地方。两者配合得当，HTML5拖拽才能顺畅完成。

有几个细节必须牢记。第一，dragover 事件每次触发时都必须调用 e.preventDefault()，只要漏掉一次，投放链路就会中断。第二，如果拖拽目标是列表中的某一项，而不是整个容器，那么应该在每个

targetItem.addEventListener('drop', e => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const draggedEl = document.getElementById(id);
  if (insertPosition === 'before') {
    e.target.before(draggedEl);
  } else {
    e.target.after(draggedEl);
  }
});