拖拽排序必须用dragstart和drop配合datatransfer，纯css无法实现；需阻止dragover默认行为，用insertbefore精确插入，react/vue应状态驱动而非直接dom操作，移动端需touch事件降级。
拖拽排序组件必须用 dragstart 和 drop 配合 dataTransfer
纯 CSS 无法实现跨元素排序，必须依赖 HTML5 原生拖拽 API。关键不是“能拖”，而是“拖完知道往哪插”。dragstart 里得存下被拖元素的索引或 ID，drop 时靠 dataTransfer.getData() 拿回来，再结合 event.target 判断插入位置。
常见错误是只监听 drop 却没阻止 dragover 默认行为——浏览器会直接拒绝投放。所有可投放区域必须监听 dragover 并调用 event.preventDefault()。
-
dragstart中设置event.dataTransfer.setData('text/plain', String(index))，避免用对象（不支持序列化） - 列表项需设
draggable="true"，否则触发不了dragstart - 投放目标建议用
<li>或带data-index的容器，别用<ul></ul>整体当目标——它没有明确的插入点
用 insertBefore 而不是 appendChild 实现精确插入
用户拖着 A 到 B 和 C 中间，目标不是把 A 加到末尾，而是插在 B 后、C 前。这就不能靠 appendChild，得用 insertBefore + 插入点判断。
典型做法：在 drop 事件里，检查 event.target 是不是当前列表项；如果是，再看鼠标 Y 坐标是否落在下半区——是则插到它后面，否则插到它前面。
- 用
target.getBoundingClientRect().top和clientY对比，比用offsetTop更可靠（不受滚动影响） - 插入前先
remove()被拖元素，否则可能复制而非移动 - 如果目标是空列表，
insertBefore第二个参数传null等价于appendChild
React/Vue 项目里别直接操作 DOM，用状态驱动重排
框架里硬写 insertBefore 容易和虚拟 DOM 冲突，导致渲染错乱或丢失事件绑定。正确姿势是：拖拽开始时记录源索引，drop 时计算目标索引，更新数组状态，让框架自动 diff 和重排。
难点在于如何把原生拖拽事件映射到状态变更。需要在 onDragStart 存 dragIndex，在 onDrop 里根据 event.target 找到目标项的 data-index，再用 splice 重组数组。
- Vue 用户可用
@dragstart="dragIndex = index"+@drop="handleDrop($event, index)" - React 用户注意
useRef存 dragIndex，避免闭包捕获旧值 - 别在
drop里直接setState([a,b,c].splice(...))——splice会改原数组，要用slice+concat或toSpliced（ES2023）
移动端 Safari 上 drag 事件基本不可用
iOS Safari 对原生拖拽支持极差：不触发 dragstart，dataTransfer 为空，drop 事件根本不会触发。这不是 bug，是 Apple 明确不支持。
真要兼容移动端，必须降级方案：用 touchstart/touchmove 模拟拖拽，配合 transform: translateY() 视觉反馈，再用 touchend 计算最终位置并更新状态。
- 不要试图 polyfill
drag事件——Safari 不暴露底层接口 - 检测
navigator.userAgent.includes('Mobile')或'ontouchstart' in window来分流逻辑 - PC 端保留原生拖拽（性能好、系统级反馈），移动端切模拟逻辑，二者状态更新方式保持一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
