html5拖拽需同时设置draggable="true"、绑定dragstart并调用setdata()，阻止dragover默认行为，移动端需polyfill或替代方案，框架中须通过状态更新而非直接dom操作。
dragstart 事件没触发，列表项完全不能拖拽
HTML5 拖拽默认只对 <img alt="HTML5拖拽排序不生效_HTML5列表项拖拽交换位置实现教程【方法】" > 和 <a></a> 生效，<li>、<div> 这类元素即使加了 <code>draggable="true"，不设 dataTransfer 也会静默失败——浏览器压根不派发 dragstart。
必须在 dragstart 回调里写一行 event.dataTransfer.setData('text/plain', '')（值可以是空字符串，但不能省略）；否则 Chrome/Firefox 都会跳过整个拖拽流程。
- 只加
draggable="true"不够，必须绑定dragstart并调用setData() - 不要用
setData('text/html', ...)去传 DOM 结构，容易触发安全限制或解析异常 - Safari 对空字符串支持更稳，别用随机 ID 或时间戳当 data 值——没意义还可能干扰后续逻辑
drop 时位置错乱，交换后顺序和视觉不一致
根本原因是没阻止 dragover 默认行为。浏览器在 drop 前会不断触发 dragover，而它的默认行为是“拒绝放置”，导致 drop 事件根本不会触发，你监听的其实是假 drop。
必须给所有可放置容器（比如 <ul></ul> 或每个 <li>）绑定 dragover，并在回调里立刻执行 event.preventDefault()；只在 drop 里 prevent 是晚的。
立即学习“前端免费学习笔记（深入）”；
-
dragover是唯一必须同步调用preventDefault()的事件，缺它drop就收不到 - 别在
dragenter里 prevent——它不决定是否允许 drop，纯属误导 - 如果列表项用了
flex或grid布局，拖拽占位符（::after等）要额外处理，否则视觉反馈滞后
移动端 touch 设备上拖拽完全失灵
HTML5 原生拖拽 API 在 iOS Safari 和 Android Chrome（尤其新版）上默认禁用，draggable="true" 形同虚设，连 dragstart 都不会触发。
没有兼容层就别硬上：要么改用 touchstart/touchmove/touchend 自实现（推荐 SortableJS），要么加一层 polyfill（如 html5-drag-and-drop-touch-polyfill），但要注意 polyfill 可能干扰原生滚动。
- iOS 16+ 仍不支持
draggable在非输入框区域生效，这是系统级限制 - 用
pointer-events: none挡住子元素时，会连拖拽事件一起屏蔽，检查 CSS 层叠 - 如果同时用了
scroll-behavior: smooth，拖拽中快速滚动可能卡死，建议临时关闭
排序后 DOM 顺序正确但 React/Vue 视图没更新
直接操作 parentNode.insertBefore() 或 appendChild() 改变 DOM，绕过了框架的响应式系统。React 不会感知这种变更，Vue 2 的 Object.defineProperty 也捕获不到原生 DOM 移动。
必须让框架控制渲染：把拖拽目标索引存进 state（React）或 data（Vue），再用 map 或 v-for 重新生成列表；DOM 移动只是视觉辅助，不是数据源。
- 别在
drop里直接el.remove()+target.before()——这等于手动撕开框架和 DOM 的绑定 - React 中用
useState存数组，拖拽结束时用splice+...spread生成新数组，触发重渲染 - Vue 3 的
ref数组也要用const newArr = [...arr]替换，避免响应式丢失
拖拽排序真正难的不是事件链，而是 DOM 操作和状态管理的边界——一不小心就在框架外改了视图，又忘了通知框架。这点在复杂列表（带展开/加载中/异步渲染）里最容易漏掉。
