原生HTML5 drag API在动态内容中需手动同步事件、DOM与数据：父容器委托dragstart、用clientX/Y重算drop位置、拖拽后立即更新数据数组，移动端应降级为SortableJS。
原生 HTML5 drag API 做动态内容拖拽排序，不是加个 draggable="true" 就能跑通——它在 DOM 动态更新后极易失灵，核心问题出在事件绑定时机、目标元素失效和数据不同步上。
动态渲染后 dragstart 事件不触发
常见现象：用 innerHTML 或 appendChild() 新增了带 draggable="true" 的 li，但点不动、没 dragstart；或者旧项还能拖，新项完全无响应。
- 根本原因是事件监听器只绑在初始 DOM 上，动态插入的节点没被监听 ——
addEventListener不会自动冒泡到新节点 - 别用
querySelectorAll('li[draggable]')批量绑定后就不管了，每次新增都要重新 bind，或改用事件委托 - 推荐方案：在父容器（如
ul）上监听dragstart，再用e.target.closest('li[draggable]')判断是否为有效拖拽源 - 注意
e.target可能是内部文字或图标，closest()能向上找最近的可拖项，比直接判nodeName === 'LI'更稳
drop 时 target 错乱或插错位置
动态列表中频繁增删项后，drop 事件里 e.target 常返回 ul、document 或空文本节点，导致 insertBefore 插到错误位置甚至报错。
- 不要依赖
e.target直接做插入点，它不可靠；必须用e.clientX/e.clientY+getBoundingClientRect()重新定位 - 遍历当前所有
li（用Array.from(ul.children)，避免 live collection 干扰），计算鼠标 Y 坐标是否落在某项的上半区/下半区 - 插入前务必检查
draggedItem === targetLi，否则可能把自身插到自己前面，DOM 报错HierarchyRequestError - 如果列表支持异步加载（如滚动到底部追加），需确保
drop逻辑执行时所有相关li已渲染完成，必要时加requestAnimationFrame延迟判断
数据与 DOM 状态不同步，重排后还原
拖拽完 DOM 顺序变了，但 JS 数组还是老顺序；下次调用 renderList() 或提交表单时，数据“回滚”到原始状态。
立即学习“前端免费学习笔记（深入）”；
- 原生 API 完全不碰你的数据，所有同步必须手动做：在
drop后立即从数组中移除被拖项、按计算出的新索引插入 - 优先用
data-id定位数据项，而不是索引 —— 动态增删会让索引随时失效；例如：const id = draggedItem.dataset.id→ 查找并移动items.find(i => i.id === id) - 如果使用模板字符串拼接（如
ul.innerHTML = items.map(...).join('')），务必在拖拽完成后重新赋值，否则 DOM 改动会被下一次渲染覆盖 - Vue/React 场景下，别直接操作 DOM；在
drop回调里触发响应式更新（如items.splice(newIndex, 0, item)），并确保 key 是稳定 ID，不是循环索引
移动端完全没反应，连 dragstart 都不触发
iOS Safari 和多数安卓 WebView 中，draggable="true" 默认被忽略，dragstart 根本不会触发 —— 这不是 bug，是规范限制。
- 原生
dragAPI 在移动端基本不可用，别浪费时间加-webkit-user-drag: element或模拟 touch 事件补丁 - 务实做法：检测
'ontouchstart' in window，移动端直接降级为SortableJS，并配好关键选项：touchStartThreshold: 10、swapThreshold: 15、ghostClass: 'sortable-ghost' - 如果坚持用原生，必须配合 CSS 强制启用：
ul { -webkit-user-drag: auto; }+li { -webkit-user-select: none; }，但成功率极低，仅限 iOS 16.4+ 小范围可用 - 动态内容场景下，
SortableJS初始化必须等 DOM 就绪 —— 用DOMContentLoaded或setTimeout(() => new Sortable(...), 0)，避免querySelector返回 null
最易被忽略的一点：动态内容拖拽排序不是“写一次就能跑”，它本质是 DOM 生命周期、事件流、数据状态三者的实时对齐。每次新增/删除项，都要确认事件代理是否覆盖、插入坐标是否重算、数据数组是否已更新 —— 少一个环节，用户松手那一刻，顺序就悄悄还原了。
