draggable="true"仅启用拖拽光标样式，不自动触发行为；必须手动配置dragstart、dragover（需preventdefault）、drop事件及datatransfer数据传递，且移动端和旧浏览器存在兼容性限制。
draggable 属性本身只是开关，设为 true 后元素光标会变拖拽样式，但**不自动触发任何行为**——想拖得动、放得下、落得准，必须手动配事件。
为什么设了 draggable="true" 却没反应？
常见错误现象：鼠标按下能拖动，松开后什么都没发生；目标区悬停时无反馈；drop 事件完全不触发。
- 最常漏掉的是
dragover中没调e.preventDefault()，浏览器默认禁止投放，drop 根本不会触发 -
dragstart里没调e.dataTransfer.setData()，导致 drop 时e.dataTransfer.getData()返回空字符串 - 对
<input>、<textarea></textarea>这类表单控件硬加draggable="true"，浏览器会无视——它们原生禁用拖拽 - 在移动端（尤其是 iOS Safari）直接依赖原生
draggable，大概率卡顿或失效，这不是代码问题，是浏览器限制
dragstart 必须设置 dataTransfer 数据
仅靠 draggable="true" 无法传递信息。拖拽的“内容”必须由开发者显式存入 dataTransfer 对象。
- 推荐类型用
"text/plain"，兼容性最好；避免只用"Text"（IE 风格写法，现代浏览器虽支持但不规范） - 值可以是 ID（
e.target.id）、序列化 JSON 字符串，甚至 base64 图片数据，但不能是 DOM 节点对象 - 如果拖多个元素，建议在
dragstart中统一用dataTransfer.effectAllowed = "move"或"copy"控制光标样式
示例：
source.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.dataset.itemId || e.target.id);
e.dataTransfer.effectAllowed = 'move';
});
dragover 和 drop 的协作要点
dragover 不只是“悬停时触发”，它是浏览器判断“此处是否允许投放”的关键闸门；drop 则是你真正执行逻辑的地方。
-
dragover事件必须每帧都调e.preventDefault()，缺一次就中断投放链路 - 不要只监听容器整体——若目标是列表项之间插入，应在每个
<li>上监听dragover，并根据e.clientY与元素边界计算插入位置（上方/下方） -
drop中获取数据后，别直接appendChild到 event.target（它可能是子文本节点或 padding 区），应先closest('.list-item')定位到有效目标
示例插入逻辑：
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);
}
});
移动端和旧浏览器的现实约束
原生 draggable 在真实项目中不是“开箱即用”，而是要提前规划降级路径。
- iOS Safari 直到 iOS 15.4 才开始部分支持，且对非
<img>元素行为极不稳定；Android Chrome 支持较好，但 touch 事件易与 drag 冲突 - IE11 及更早版本不支持
draggable，需 fallback 到mousedown/mousemove/mouseup模拟 - 若业务强依赖拖拽排序（如表单构建器、看板管理），建议直接引入
interact.js或sortablejs，它们封装了 touch 兼容、动画、嵌套等复杂逻辑
真正容易被忽略的点：**拖拽过程中用户可能意外切出页面、快速滚动、或触发 zoom —— 这些都会中断原生 drag 事件流，而第三方库通常有重试或状态恢复机制，原生 API 没有。**
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
