html拖拽排序需正确处理dragover（必须preventdefault）、drop（用insertbefore而非appendchild）、移动端降级（safari禁用draggable）及状态保持（如input值缓存），否则会导致交互失效、顺序错乱或焦点丢失。
HTML拖拽排序本身不会破坏列表交互，但若事件监听不完整或 DOM 操作不当，会直接导致点击、输入、焦点等行为失效。
dragover 不阻止默认行为 → 列表点击完全失灵
这是最常被忽略的硬性前提：只要目标容器没监听 dragover 并调用 e.preventDefault()，整个拖拽流程就卡死。此时不仅 drop 不触发，更隐蔽的问题是——鼠标悬停、click、focus 等事件在目标区域全部变迟钝甚至失效，尤其在 Chrome 中表现明显。
- 错误写法：
<ul ondragover="console.log('never hit')"></ul>（没preventDefault） - 正确写法：
ul.addEventListener('dragover', e => e.preventDefault()) - 必须同时监听
drop，否则拖拽释放后元素“消失”或位置错乱 - 如果列表项里有
<input>或<button></button>，未阻止dragover会导致它们无法获得焦点
drop 时直接 appendChild → 列表顺序错乱、交互状态丢失
用户拖拽的不是“新副本”，而是原 DOM 节点本身。若在 drop 里只做 parent.appendChild(draggedEl)，它会被无条件塞到末尾，视觉和逻辑都错位；更严重的是，节点移走后，原绑定的事件监听器、React/Vue 组件状态、input 的当前值都会断开。
- 必须用
parent.insertBefore(draggedEl, referenceEl)插入到指定位置 -
referenceEl需动态计算：监听dragenter或dragover，用e.clientY对比每个兄弟元素的getBoundingClientRect()上下边界 - 插入前先
draggedEl.remove()，避免重复渲染或残留空白 - 若列表项含受控
<input>，需在dragstart中缓存其 value，drop后手动恢复
移动端 Safari 完全禁用 draggable → 列表在 iOS 上“不可拖”是常态
这不是 bug，是 Safari 的明确策略：iOS / iPadOS 的 WebKit 引擎从底层禁用了 draggable 属性和所有 drag 事件。控制台不报错，但 dragstart 根本不会触发，连 console.log 都看不到。
- 检测方式：
'ontouchstart' in window && !window.chrome（粗略但有效） - 不要尝试用
touchmove + transform模拟——滚动冲突、惯性、缩放会让位置计算彻底失效 - 务实降级方案：显示“↑ ↓”按钮、长按弹出位置选择框、或切换为
sortablejs的 forceFallback 模式 - Vue/React 项目建议直接用
vuedraggable或react-sortable-hoc，它们已内置 UA 判断和 touch fallback
真正麻烦的不是拖拽本身，而是拖拽过程中对 DOM 的“原地搬运”会切断所有已有绑定。哪怕只是给列表加个可拖拽功能，也得同步处理事件重绑、输入状态保持、移动端兜底——这些细节不显眼，但漏掉一个，列表就从“能用”变成“点了没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
