HTML5拖拽成功的关键在于拖拽源与放置目标的明确分工：拖拽源需设draggable="true"并用dragstart设置dataTransfer，放置目标须在dragover中preventDefault以启用投放。
要让 HTML5 拖拽真正跑起来，关键不在“拖”本身，而在于两个角色的明确分工和配合：拖拽源负责“发起并携带信息”，放置目标负责“接收并响应动作”。两者缺一不可，且各自有不可省略的设置逻辑。
拖拽源必须显式启用并初始化数据
不是所有元素天生可拖——div、span、section 等常规容器默认 draggable="false"，哪怕加了 cursor: move 也没用。必须手动开启：
- 在元素上写
draggable="true"（注意是字符串"true"，不是布尔值true）； - 同时绑定
dragstart事件，在其中调用event.dataTransfer.setData()，哪怕只传空字符串或简单 ID，例如：event.dataTransfer.setData('text/plain', 'item-123')； - 不设
setData，Chrome 和 Firefox 会静默终止拖拽流程，拖着没反应、松手就回弹； - 若需操作 DOM 节点本身（如排序），建议在
dragstart中缓存引用，比如window.draggedElement = event.target或用WeakMap存储，比依赖getData()更直接可靠。
放置目标必须主动“申请接收权”
浏览器默认禁止向任意区域投放，所以放置目标不是“等着被放”，而是要主动声明自己愿意接受——核心就是 在 dragover 里阻止默认行为：
- 为容器（如
<div id="list">）监听dragover事件，并第一行执行event.preventDefault()； - 仅靠
ondrop绑定无法触发drop事件，dragover不阻止，默认行为会直接取消整个投放流程； - 可配合
dragenter和dragleave添加视觉反馈（比如加边框、变背景色），提升交互感； - 如果目标区域需要判断“放上面还是下面”（如列表排序），就在
dragover中实时计算鼠标相对位置，而不是等到drop才决定插入点。
拖拽源与放置目标可以是同一个元素
很多交互场景（如看板卡片互拖、文件夹内移动）要求一个元素既能被拖、也能接拖——这完全可行，只需同时满足两套条件：
立即学习“前端免费学习笔记（深入）”；
- 自身设
draggable="true"并处理dragstart； - 自身也监听
dragover和drop，并正确阻止默认行为； - 注意事件冒泡可能带来的干扰，必要时在
dragstart或drop中调用event.stopPropagation()； - DOM 操作时避免重复插入，例如用
insertBefore(el, target)或insertBefore(el, target.nextSibling)安全替换位置。
dataTransfer 的 type 参数有实际限制
setData() 和 getData() 的第一个参数不是随便写的标签，它影响跨浏览器兼容性：
- 推荐只用
'text/plain'或'text/html'，这两个类型所有主流浏览器都稳定支持； - 写成
'my/data'或'json'会导致 Firefox 拒绝读取、Chrome 返回空字符串； - 若需传结构化数据，先
JSON.stringify()再用'text/plain'存； - 排序类场景基本不需要
dataTransfer传数据，直接操作 DOM 引用更高效、更安全。
