原生html5拖拽排序需绑定dragover/drop到容器并用closest定位li、e.preventdefault()启用drop、getboundingclientrect计算插入点、ios降级处理、datatransfer仅传id。
原生 HTML5 拖拽排序能跑通，但用户一上手就卡顿、插错位、iOS 上直接失灵——问题不在“会不会写”，而在事件绑定粒度、插入逻辑和平台边界没理清。
dragover 必须绑定到容器，不是每个 li
常见错误是给每个 li 单独绑 dragover 和 drop，结果事件频繁冒泡、判断错乱，光标悬停时列表项疯狂闪动。正确做法是只在容器（如 ul#sortable-list）上监听 dragover 和 drop，再用 e.target.closest('li') 定位当前悬停项。
-
dragover里必须调用e.preventDefault()，否则 Safari/Chrome 都会拒绝 drop - 不要在
dragover里做 DOM 修改（比如加 class），高频触发会导致重排；改用requestAnimationFrame节流或仅更新data-drag-over属性 - 若列表项内有按钮、图标等子元素，
e.target可能是它们，不一定是li，所以必须用closest('li')向上找
drop 时插入位置要靠 getBoundingClientRect() 算，不能只看 nextSibling
靠 list.insertBefore(draggedItem, target.nextSibling) 这类写法，只能实现“插到某项后面”，用户拖到两项中间时，实际插入点永远偏移——因为 nextSibling 不代表鼠标意图。真实体验需要根据鼠标 Y 坐标判断该插在哪个 li 之前还是之后。
- 在
dragover中获取目标li的getBoundingClientRect()，算出垂直中点：const mid = (rect.top + rect.bottom) / 2 - 对比
e.clientY和mid：小于则插在它前面，大于则插在它后面 - 插入前先
list.removeChild(draggedItem)，避免 DOM 中残留副本 - 别忘了清理所有
li的临时 class（如drag-over），否则视觉残留
移动端 iOS Safari 不支持 draggable，降级方案得提前写死
iOS 上 draggable="true" 是被硬禁用的，事件根本不会触发，控制台也不报错——你调试半天发现连 dragstart 都没进，就是这个原因。
- 检测是否为 iOS：
/(iPad|iPhone|iPod)/.test(navigator.userAgent)，成立就跳过原生拖拽初始化 - 降级用点击交互：每项加 ↑ ↓ 按钮，或长按弹出位置选择浮层（
data-id对应真实数据索引） - 如果项目已引入 SortableJS，直接启用
forceFallback: true，它内部用touchstart/move/end模拟，且处理了滚动冲突 - 切勿尝试自己用
touchmove + transform手搓拖拽——缩放、惯性滚动、多指操作会让逻辑崩坏
dataTransfer 只传 ID，别传 HTML 或 JSON 字符串
e.dataTransfer.setData('text/html', el.innerHTML) 看似方便，但一旦列表项含表单控件（input、select），值状态会丢失；传 JSON 更危险：跨 iframe 或 CSP 严格策略下可能被截断或拒绝。
- 只存标识：
e.dataTransfer.setData('text/id', el.dataset.id) - DOM 插入后，立刻用该 ID 查找原始数据数组，同步更新 JS 状态（如
dataList） - 若需持久化，drop 后立即调用
localStorage.setItem()或发 API，别等到页面卸载 - 避免在
dragstart里读取大量 DOM 内容，影响拖拽起始响应速度
最易被忽略的一点：拖拽过程中用户可能意外刷新页面，或切换标签页。如果业务强依赖顺序，得在 dragstart 前就缓存一次当前顺序，否则 drop 前中断，数据就回不去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
