可排序列表在后台管理系统、任务看板、自定义导航等场景中非常常见。HTML5 拖放 API 提供了一套原生事件机制，不引入第三方库也能完成拖动排序。不过直接使用时会遇到几个典型问题：目标元素默认不允许放置、拖动过程中如何判断插入位置、移动端又不支持原生拖放。本文会从事件模型、排序算法和视觉反馈三个角度展开，给出可以直接运行的前端代码。
一、拖放事件模型与必须阻止的默认行为
HTML5 拖放 API 围绕源元素和目标元素设计了多个事件。源元素在拖动开始时触发 dragstart，目标元素在拖动经过时触发 dragover，释放时触发 drop，拖动结束源元素触发 dragend。浏览器默认行为会阻止元素成为放置目标，因此必须在 dragover 事件中调用 e.preventDefault()，否则 drop 事件永远不会触发。这是实现可排序列表的第一个关键点。
要让列表项可拖动，需要在每个 <li> 元素上添加 draggable 属性并设置为 true。同时建议在 dragstart 中设置 dataTransfer.effectAllowed 和 setData，部分浏览器如果不调用 setData，拖拽操作可能无法正常启动。下面是一个基础列表结构：
<ul id="sortable-list"> <li draggable="true">列表项 A</li> <li draggable="true">列表项 B</li> <li draggable="true">列表项 C</li> <li draggable="true">列表项 D</li> </ul>
这段结构很简单，但真正决定排序体验的是 JavaScript 中如何处理 dragover。许多实现会等到 drop 时再交换两个元素，这种方式在视觉上不够直接。更好的做法是在 dragover 阶段就根据鼠标位置实时移动被拖拽元素，这样用户松开鼠标前便能预览最终顺序。
二、核心排序逻辑：从交换到插入
如果只做相邻交换，固然可以完成排序，但跨多个位置拖动时需要多次交换，逻辑复杂且容易出错。一个更可靠的方案是计算插入位置。具体做法是：在 dragover 中获取鼠标的 Y 坐标，然后遍历所有未被拖拽的列表项，比较每个项的垂直中线。如果鼠标位于某个项的上半部分，就把它作为插入参照物，将拖动元素移动到它前面；如果鼠标已经越过所有项的中线，则把拖动元素追加到列表末尾。
下面这段代码实现了上述逻辑。函数 getDragAfterElement 会返回一个参照元素，调用方根据返回值决定使用 insertBefore 还是 appendChild。注意 dragover 事件触发非常频繁，每次移动前应确保 draggingElement 仍然存在，并且目标位置确实发生了变化，否则可能出现抖动。
const list = document.getElementById('sortable-list');
let draggingElement = null;
list.addEventListener('dragstart', function (e) {
draggingElement = e.target;
e.target.classList.add('dragging');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', '');
});
list.addEventListener('dragover', function (e) {
e.preventDefault();
if (!draggingElement) return;
const afterElement = getDragAfterElement(list, e.clientY);
if (afterElement == null) {
list.appendChild(draggingElement);
} else {
list.insertBefore(draggingElement, afterElement);
}
});
function getDragAfterElement(container, y) {
const items = Array.from(container.querySelectorAll('li:not(.dragging)'));
let closest = null;
let closestOffset = Number.NEGATIVE_INFINITY;
items.forEach(function (item) {
const box = item.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closestOffset) {
closestOffset = offset;
closest = item;
}
});
return closest;
}
list.addEventListener('drop', function (e) {
e.preventDefault();
});
list.addEventListener('dragend', function (e) {
e.target.classList.remove('dragging');
draggingElement = null;
});
这段代码的关键在于 getDragAfterElement 中的 offset 计算。它用鼠标 Y 坐标减去元素中线的 Y 坐标，得到的负数说明鼠标在中线上方，值越大说明越接近中线。通过记录最大的负数，可以找到最靠近鼠标下方的那一项。这样，当用户把元素拖到列表中间时，代码会实时把元素插到正确位置，而不是等 drop 后再处理。
还需要注意 querySelectorAll 选择器中的 :not(.dragging)。给被拖拽元素添加 dragging 类后再排除它，可以避免在计算插入位置时把自己也当成参照物。否则在 dragover 过程中移动自身时，循环会拿到错误的数据，导致元素反复跳动。
三、视觉反馈与拖拽状态管理
拖动过程中的视觉反馈直接影响用户体验。至少需要做三件事：被拖拽元素降低透明度，鼠标经过的列表项有背景变化，以及列表容器保持可识别的边界。给 <li> 设置 cursor: grab，拖动时切换为 grabbing，比默认箭头更符合拖拽直觉。
下面是一段配套的 CSS。它没有使用复杂的过渡动画，只保留背景色和透明度的短过渡，这样在 dragover 频繁触发时不会因为动画延迟造成视觉拖影。被拖拽元素使用半透明蓝色背景，和普通项目区分开。
#sortable-list {
list-style: none;
padding: 0;
max-width: 420px;
}
#sortable-list li {
padding: 12px 16px;
margin: 6px 0;
background: #f5f7fa;
border: 1px solid #d9dee3;
border-radius: 6px;
cursor: grab;
transition: background 0.2s, opacity 0.2s;
}
#sortable-list li:hover {
background: #eef3f8;
}
#sortable-list li.dragging {
opacity: 0.5;
background: #dbeafe;
}
需要特别说明的是，不要在 dragstart 里给元素设置 display: none。虽然这样可以让原位置立即消失，看起来像被拿起，但某些浏览器会因此直接中断拖拽事件，导致 dragover 和 drop 无法继续。更稳妥的做法是保留元素在文档流中，只通过透明度或轮廓来表现拖拽状态。
如果想增加占位符效果，可以在 dragover 中动态插入一个高度相同的空 <li> 作为占位，但需要注意删除时机。对于大多数场景，直接实时移动被拖拽元素已经足够直观，复杂度也更低。
四、移动端与边界情况处理
原生 HTML5 拖放 API 在桌面端浏览器中支持良好，但在 iOS 和部分 Android 浏览器上并不完整。尤其是触摸事件不会自动转换为拖放事件，导致 dragstart 根本无法触发。如果项目需要支持移动端，一般有两种选择：一是使用 Pointer Events 自己实现一套拖动逻辑，二是引入轻量级拖拽库或 Polyfill。对于简单的后台管理界面，也可以提供上移、下移按钮作为移动端的降级方案。
可以用下面的代码检测当前设备是否支持触摸，从而决定是否启用按钮降级。桌面端继续使用原生拖放，移动端隐藏拖拽提示并显示按钮。
function isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}
if (isTouchDevice()) {
document.body.classList.add('touch-mode');
// 在移动端启用上移、下移按钮排序逻辑
}
另一个容易忽略的边界问题是浏览器默认的文本选择。拖动列表项时，如果鼠标划过文本，可能触发文本选择，影响体验。可以在 dragstart 时调用 e.dataTransfer.setData('text/plain', '') 来抑制部分浏览器默认行为，也可以给列表容器设置 user-select: none，但要注意不要影响其他阅读型内容的可访问性。
跨容器拖放也是可排序列表常见的扩展方向。两个 <ul> 之间互相拖动时，需要把 dragover 监听器绑定到所有容器上，并在 drop 或 dragend 时更新数据状态。原生拖放 API 通过 dataTransfer 无法携带复杂对象，建议只传递 ID，真正的数据更新放在本地状态中完成。
综合来看，拖放 API 实现可排序列表的核心在于事件时序和插入位置计算。只要在 dragover 阶段实时移动元素，并处理好移动端的降级策略，就可以获得一套不依赖第三方的轻量方案。根据业务复杂度，你还可以在此基础上加入动画、跨容器和持久化接口。