HTML5拖拽排序核心是dragstart中设置dataTransfer，drop时必须preventDefault；推荐用text/plain传id，用insertBefore精准插入，移动端需用SortableJS等库替代原生API。
dragstart 事件里必须设置 dataTransfer
HTML5 拖拽排序的核心不是 draggable="true" 属性本身，而是 dragstart 中对 dataTransfer 的设置。不设它，拖拽会失败或无法传递索引信息。
常见错误：只加属性、不监听事件，或监听了但没调用 setData()：
element.addEventListener('dragstart', e => {
// ❌ 错误：没设置任何数据，目标元素收不到原始位置
// ✅ 正确：至少传个唯一标识，比如索引或 id
e.dataTransfer.setData('text/plain', String(index));
});- 推荐用
text/plain类型，兼容性好；避免用自定义类型（如application/json），IE/旧 Edge 不支持 - 不要传 DOM 节点或对象，
setData()只接受字符串 - 如果列表项有
id，优先传id而非索引——重排过程中索引会动态变化，id更稳定
drop 事件必须阻止默认行为
没调 e.preventDefault()，drop 事件根本不会触发——这是最常被卡住的点。浏览器默认把拖拽当“文件下载”或“链接跳转”处理，不阻止就直接走了。
注意：仅在 dragover 里阻止还不够，drop 里也得再写一次：
立即学习“前端免费学习笔记（深入）”；
container.addEventListener('drop', e => {
e.preventDefault(); // ⚠️ 必须有
const sourceId = e.dataTransfer.getData('text/plain');
// 后续逻辑：找到 sourceId 元素，插入到当前 target 的位置
});-
dragover和drop是两个独立事件，缺一不可 - 别只在父容器上监听
drop，确保目标区域（比如<li>或空隙）能捕获到事件；必要时给容器加min-height防止塌陷导致拖不到 - 移动端不支持原生 drag/drop，需另配库（如
sortablejs）或用 touch 事件模拟
用 insertBefore 还是 appendChild？看插入位置
调整顺序本质是 DOM 移动，关键在「插到哪」：想插到某个元素前面，用 insertBefore；想追加到最后，用 appendChild。混用会导致顺序错乱。
典型场景：拖着 A 到 B 和 C 之间，目标是让 A 插入到 C 前面（即 B 之后、C 之前）：
// ✅ 正确：插到 C 前面 targetContainer.insertBefore(draggedElement, nextElement); // nextElement 是 C <p>// ❌ 错误：插到 C 后面（变成 B → C → A），不是想要的顺序 targetContainer.insertBefore(draggedElement, nextElement.nextSibling);
- 获取「下一个兄弟元素」用
nextElementSibling，不用nextSibling（后者可能返回文本节点） - 如果拖到末尾，
nextElementSibling是null，此时insertBefore(el, null)等价于appendChild(el)，可统一处理 - 移动前先从原父节点
removeChild再插入，否则 DOM 会自动从原位消失——现代浏览器允许直接insertBefore已存在元素，但逻辑更清晰的做法是显式移除
拖拽中视觉反馈靠 dragover + CSS :hover 不够
仅靠 :hover 或简单添加 class，用户很难判断「松手后 A 会落在哪」。真实体验需要实时显示插入锚点（比如一条横线或高亮间隙）。
做法是监听 dragover，根据鼠标位置计算最近的「可插入间隙」，然后动态加样式：
container.addEventListener('dragover', e => {
const rect = container.getBoundingClientRect();
const y = e.clientY - rect.top;
let dropIndex = 0;
for (let i = 0; i < items.length; i++) {
const itemRect = items[i].getBoundingClientRect();
if (y > itemRect.top - rect.top + itemRect.height / 2) {
dropIndex = i + 1;
}
}
// 清除旧锚点，给第 dropIndex 个位置前加伪元素或 border-top
});- 别依赖
event.target判断悬停元素——拖拽时target往往是被拖元素自身，不是容器里的项 - 用
getBoundingClientRect()计算位置比 offsetTop 更可靠，不受 transform 影响 - 移动端缺失
dragover，这条逻辑基本失效；真要支持多端，建议放弃原生 API，直接上SortableJS或react-dnd这类封装好的方案
拖拽排序看着简单，实际卡点全在事件时机、DOM 插入逻辑和跨浏览器行为差异上。特别是 dataTransfer 的设置和 preventDefault 的位置，漏一个就整个流程断掉。
