dragstart 必须调用 datatransfer.setdata()，否则 dragover 和 drop 不触发；dragover 必须 preventdefault() 才允许投放；drop 中需手动 getdata() 处理数据；移动端原生 drag/drop 不支持，需用 touch 或专用库替代。
dragstart 事件必须设置 dataTransfer
没有 dataTransfer.setData()，后续的 dragover 和 drop 就不会触发——这是最常被忽略的卡点。浏览器默认会阻止 drop，而阻止的前提是“没看到合法拖拽数据”。
实操建议：
-
dragstart回调里必须调用e.dataTransfer.setData('text/plain', 'some-id')（类型字符串不能乱写，'text/plain'最稳妥） - 如果拖的是元素，推荐用自定义类型如
'application/my-item'，再配合e.dataTransfer.effectAllowed = 'move'明确意图 - 不要只设空字符串或
null，部分浏览器（如 Safari）会直接跳过整个拖放流程
dragover 事件必须阻止默认行为
dragover 默认不放行 drop，哪怕你写了 drop 监听也没用。它的唯一作用就是“告诉浏览器：这里允许投放”，而这个许可必须靠 e.preventDefault() 显式声明。
常见错误现象：
立即学习“Java免费学习笔记（深入）”；
- 光标始终显示“禁止”图标（圆圈斜杠）
-
drop事件完全不触发，控制台也无报错 - 仅在 Chrome 中工作，Firefox/Safari 失效（因各浏览器对未
preventDefault的dragover处理更严格）
实操建议：
- 监听
dragover时，第一行就写e.preventDefault() - 可选加
e.dataTransfer.dropEffect = 'move'来同步光标样式（但不是必须） - 别只在目标容器上监听——如果容器有内层子元素，需确保事件能到达或委托到容器本身
drop 事件里要主动取 dataTransfer 数据
drop 触发后，e.dataTransfer 里的数据不会自动还原或映射到 DOM；你得手动 getData()，再决定怎么插入、移动或更新节点。
使用场景与注意事项：
- 若拖的是文本，用
e.dataTransfer.getData('text/plain')取值 - 若拖的是自定义元素，建议用
e.dataTransfer.getData('application/my-item')并解析 ID 或 JSON 字符串 - 注意：Safari 对非
'text/*'类型的getData()支持不稳定，生产环境建议 fallback 到'text/plain'存序列化数据 -
drop后记得补一句e.preventDefault()（虽然多数情况已不必要，但防兼容性问题）
移动端不支持原生 drag/drop 事件
所有 iOS Safari 和 Android Chrome（WebView）均不触发 dragstart/dragover/drop。这不是 bug，是规范层面的放弃——W3C 明确将这套 API 定义为“桌面专用”。
替代方案只有两个现实选择：
- 用
touchstart+touchmove+touchend手搓拖放逻辑（需自己计算位移、碰撞、吸附等） - 引入轻量库如
interact.js或sortablejs（后者专攻列表排序，对 touch 有完整封装） - 如果只是想让桌面/移动端体验一致，别试图“降级”原生 API，直接统一走 touch 方案更省心
真正麻烦的不是实现，而是设计时忘了这回事——等上线后用户反馈“手机没法拖”，再切方案就涉及交互重构。
