原生JavaScript拖放需手动处理dragstart、dragover、drop事件，dragover必须调用preventDefault()才能触发drop；dataTransfer仅支持字符串数据；移动端Safari等不支持原生拖放，需降级为pointer事件模拟。
原生 JavaScript 拖放功能不难实现，但必须手动处理 dragstart、dragover、drop 三个核心事件，且 dragover 默认被浏览器阻止，不显式调用 event.preventDefault() 就永远拖不进去。
为什么元素拖不动或拖不进目标区？
这是最常卡住的地方：浏览器对 dragover 和 drop 事件默认取消（即禁止放置），哪怕你绑了 drop 处理函数也没用。必须在 dragover 中阻止默认行为。
-
dragstart：仅在此时设置event.dataTransfer.setData()，否则后续拿不到数据 -
dragover：必须同步调用event.preventDefault()，否则drop不会触发 -
drop：此时才能读取event.dataTransfer.getData()，并执行插入/移动逻辑 - 目标容器若为
div等非表单元素，默认不可拖入，必须靠dragover的preventDefault“激活”
如何让多个元素可拖、多个区域可接收？
关键在于用统一的 class 或 data 属性标记可拖/可投区域，避免硬编码 ID。拖放过程中的数据载体是 dataTransfer，它只支持字符串类型，所以传 DOM 节点不行，得传 ID 或序列化数据。
- 给可拖元素加
draggable="true"属性（HTML 属性，不是 JS 属性） - 用
event.target.dataset.id或event.target.id存标识，setData('text/plain', id)传过去 - 接收区监听
drop后，用getData('text/plain')拿回 ID，再查 DOM 或更新状态 - 如果要支持跨容器排序，需在
drop中计算鼠标位置与目标子元素的相对位置（比如用element.getBoundingClientRect()+event.clientY）
移动端或 Safari 下拖放失效怎么办？
原生 drag / drop 事件在 iOS Safari 和大部分安卓 WebView 中基本不可用——它们压根不触发 dragstart。这不是代码写错了，是浏览器没实现。
立即学习“Java免费学习笔记（深入）”；
- 不要试图用
touchstart+touchmove模拟原生拖放事件流，因为dataTransfer在触摸事件里不可写 - 真实项目中，移动端建议改用
pointerdown/pointermove+ CSStransform位移 + 手动判断释放位置 - 若必须统一 API，推荐轻量库如 Shopify/draggable（专注拖放，无框架依赖）
- Safari 16.4+ 开始部分支持，但
dataTransfer.items仍受限，别依赖文件拖入等高级能力
真正麻烦的从来不是“怎么写完”，而是“怎么让 Chrome、Edge、Safari 表现一致”和“怎么优雅降级到触摸拖拽”。原生 API 看似简单，但 event 对象的兼容性、dataTransfer 的类型限制、移动端缺失，每一条都得单独兜底。
