draggable属性仅启用元素可拖动状态，不自动触发拖放逻辑；必须手动绑定dragstart、dragover（需preventDefault）、drop事件，并正确使用dataTransfer setData/getData，且注意移动端不支持。
draggable 属性本身不触发拖放，只是开启 HTML 元素的可拖动状态
设置 draggable="true" 只是告诉浏览器“这个元素允许被鼠标拖拽”，但不会自动产生任何数据传输或位置更新。它只是拖放流程的起点，后续所有逻辑必须靠事件监听手动实现。
常见错误是只加了 draggable="true" 就以为拖放能用了——结果拖不动、没反应、或者松手后啥也没发生。这是因为缺了关键的事件绑定和 dataTransfer 操作。
-
draggable="false"（默认）：元素不可拖，即使监听了dragstart也不会触发 -
draggable="true"：仅启用原生拖拽 UI 行为（光标变+号、半透明拖影），但无数据、无目标判定 -
draggable="auto"：由浏览器按元素类型决定（如图片、链接默认可拖，div默认不可拖）
必须监听 dragstart、dragover、drop 这三个核心事件
拖放交互依赖三步闭环：dragstart（开始拖）、dragover（拖入目标区）、drop（松手投放）。漏掉任意一个，流程就断了。
特别注意 dragover：它默认被浏览器阻止（防止页面被随意拖文件进来），必须在事件回调里显式调用 event.preventDefault()，否则 drop 根本不会触发。
-
dragstart：在这里用event.dataTransfer.setData(format, data)存入要传递的数据（如"text/plain"或自定义"application/json"） -
dragover：只做event.preventDefault()即可，别忘了加；也可在此设置event.dataTransfer.dropEffect = "move"控制光标样式 -
drop：用event.dataTransfer.getData(format)取出数据，再执行插入、移动、复制等业务逻辑
drop 目标必须是容器元素，且需处理 event.target 和 event.currentTarget 的差异
当用户把元素拖进一个 div 并松手，event.target 很可能是该 div 内部的文本节点、子 span 或空格，而不是你绑事件的那个父容器。直接操作 event.target 容易报错或插错位置。
推荐统一用 event.currentTarget（即监听事件的 DOM 节点），或者用 event.target.closest(".drop-zone") 主动向上找目标容器。
- 避免对
event.target直接调用appendChild()或insertBefore() - 如果目标区有内边距/滚动条，
event.clientX/Y坐标需转成相对于容器的偏移，才能精确定位插入点 - 移动端不支持原生
draggable，Safari iOS 甚至会忽略dragstart；需要额外用touchstart/move/end+transform模拟
setData/getData 的 format 字符串必须严格匹配，大小写敏感
很多人卡在 getData("Text") 返回空字符串，其实是因为 setData("text/plain", "abc") 存的是小写 "text/plain"，而 "Text" 不匹配。浏览器不自动标准化 MIME 类型格式。
- 常用安全格式：
"text/plain"、"text/html"、"application/json" - 自定义格式如
"myapp/item-id"也可以，但收发两端必须完全一致 - 不要依赖
dataTransfer.types数组顺序，不同浏览器返回顺序可能不同；建议用dataTransfer.types.includes("text/plain")判断是否支持
dragover 忘写 preventDefault、getData 和 setData 的 type 不一致、以及移动端完全失效这三点上。 
