HTML5拖拽排序需配对使用dragstart/drop事件，dragover中必须e.preventDefault()；容器要监听dragover/drop；用insertBefore实现插入位置；移动端Safari不支持，需降级方案；dataTransfer仅传字符串，推荐用dataset存ID。
HTML5 dragstart 和 drop 事件必须配对使用
只监听 dragstart 没用，浏览器默认会阻止 drop 行为。必须在 dragover 事件里调用 e.preventDefault()，否则拖拽到目标区域时鼠标显示“禁止”图标，drop 根本不会触发。
常见错误是只给列表项加 draggable="true"，却忘了给容器（如 <ul>）绑定 dragover 和 drop 监听器。
-
<li draggable="true">是起点，但不是全部 - 目标容器需显式设置
ondragover="e.preventDefault()"或 JS 中监听并阻止默认行为 -
drop事件里要用e.dataTransfer.getData('text/plain')取数据——但更推荐用自定义类型如'text/id'避免冲突
用 insertBefore 实现视觉插入而非简单 appendChild
直接 appendChild 只能拖到末尾，用户想要的是“插到某两项之间”。关键在于：在 drop 事件中，根据鼠标位置判断该插在哪个兄弟元素之前。
实操建议是监听 dragenter 或 dragover 时动态计算光标相对于每个 <li> 的垂直偏移，标记当前“插入点”，再在 drop 时调用 parent.insertBefore(newItem, referenceElement)。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
e.target—— 它可能是子元素（如图标、文字），应向上找最近的<li> - 用
getBoundingClientRect()算出每个<li>的上下边界，对比e.clientY判断插入位置 - 插入前先
remove()拖拽项本身，避免重复渲染
移动端 Safari 不支持原生 drag API
iOS / iPadOS 上的 Safari 完全禁用 draggable 属性和相关事件，这是硬限制，不是 bug。强行启用无效，也不建议用 touchmove + transform 自己模拟——滚动冲突、惯性、缩放都会导致体验崩坏。
如果必须支持移动拖拽排序，务实做法是：检测 'ontouchstart' in window，降级为点击切换顺序按钮（↑↓）、长按弹出位置选择菜单，或改用第三方库如 sortablejs（它内部已处理 UA 判断和 touch fallback）。
- 别在 iOS 上调试
dragstart——控制台不会报错，但事件根本不会发出 -
sortablejs的forceFallback: true可强制启用非 drag 模式，适合测试兼容路径 - 若用 Vue/React，优先选
vuedraggable或react-sortable-hoc，它们封装了平台差异
dataTransfer 只能传字符串，别试图塞对象
e.dataTransfer.setData('text/plain', JSON.stringify(data)) 看似可行，但跨 iframe 或不同 origin 时可能被截断；更严重的是，如果拖拽源和目标不在同一 DOM 树（比如从侧边栏拖进主列表），getData 可能返回空字符串。
真正可靠的做法是：不依赖 dataTransfer 传业务数据，而用 DOM 元素自身属性记录 ID 或索引，例如 item.dataset.id = '123'，drop 时直接读取 e.target.closest('li').dataset.id。
-
dataTransfer.effectAllowed = 'move'可提示用户这是移动操作（显示“+”或“→”图标），但仅限桌面 Chrome/Firefox - 不要在
dragstart里修改元素样式（如opacity: 0.5）后忘记恢复——dragend可能不触发（比如拖出窗口） - 排序完成后，记得同步更新对应的数据数组，否则 React/Vue 的响应式更新会失效
dragover 阻止默认行为漏写、移动端无 fallback、或者 dataTransfer 传参误以为能跨上下文共享状态。 
