JavaScript 实现拖拽排序，本质上就是监听三个核心事件——dragstart、dragover、drop——然后动态调整 DOM 结构。现代浏览器原生支持 HTML5 拖放 API，完全不需要第三方库也能轻松搞定。不过，细节决定成败，我们一步步拆解来看。
要实现拖拽排序，首先得让元素变得“可拖拽”。设置 draggable="true" 是第一步，然后在 dragstart 事件中把元素的唯一标识（比如 ID）存进 dataTransfer 对象里，相当于给拖拽过程贴上一个标签。拖拽源一旦确定，后续的操作才有依据。
启用拖拽与标识拖拽源
- 给列表项（比如
）加上draggable="true"。 - 在
dragstart里用e.dataTransfer.setData("text/plain", e.target.id)把 ID 存进去。 - 顺手设置
e.dataTransfer.effectAllowed = "move"，明确告诉浏览器这是移动操作，而不是复制。
一个小技巧：dragstart 里还可以设置拖拽时的视觉反馈，后面会提到。
允许放置并实时反馈位置
目标容器（比如 dragover 和 drop。关键点：dragover 里必须调用 e.preventDefault()，否则 drop 根本不会触发。这其实是在告诉浏览器“我允许放置”。
- 在
dragover中执行e.preventDefault()，并可以添加临时样式（比如边框高亮），提示用户这里可以放置。 - 利用
e.clientY或e.target.getBoundingClientRect()计算鼠标位置，判断应该插入到哪个元素前面。简单做法：遍历所有子元素，比较它们的top值和鼠标 Y 坐标。
执行排序逻辑与 DOM 更新
drop 事件触发后，才是真正的重头戏——把拖拽元素移动到正确的位置。
- 从
e.dataTransfer.getData("text/plain")取出源元素 ID。 - 用
document.getElementById()找到源节点。 - 确定目标插入点：比如遍历子元素，比较其
getBoundingClientRect().top与鼠标 Y 坐标，找到插入位置。 - 调用
targetContainer.insertBefore(draggedElement, referenceElement)完成插入；如果插到最后，直接用appendChild。
注意：如果拖拽的是自身，要加一个判断过滤掉，避免把自己拖到自己身上导致位置混乱。
优化体验与边界处理
基础功能跑通后，还有不少细节可以打磨，否则用户体验会打折扣。
- 在
dragstart中设置e.dataTransfer.setDragImage(new Image(), 0, 0)可以隐藏默认的半透明拖影（或者换成自定义缩略图）。 - 为拖拽中的元素添加 CSS 类，比如
.dragging { opacity: 0.5; }，让用户知道当前正在拖拽哪个元素。 - 拖拽结束（
dragend）时清理临时类名和样式，保持状态干净。 - 别忘了处理边界情况：比如拖拽到容器之外，或者拖拽文字等非目标元素。
说到底，HTML5 拖放 API 并不复杂，但兼容性和细节处理才是关键。如果项目对浏览器兼容性要求高（比如要支持 IE11），可能还需要降级方案或使用成熟的拖拽库。不过，对于现代浏览器，这套原生方案已经足够健壮。
