前端拖拽排序为什么会跳回原位：pointer capture、DOM 顺序与键盘回退

拖拽列表时，卡片明明跟着指针移动，松手后却又跳回原位，绝大多数情况不是移动距离的计算逻辑写错了，而是拖动过程中丢失了指针事件，或者页面只改了视觉位置却没有同步更新真实 DOM 顺序，键盘交互场景下甚至根本不会执行同一条排序逻辑。

排序跳回的核心根因大多分三类：拖动过程指针事件脱离原监听节点、视觉拖拽效果和真实数据/ DOM 顺序不同步、键盘回退/可访问性场景没有复用排序校验逻辑，逐个补全这三点就能解决绝大多数拖拽排序回弹问题。

先确定跳回原位发生在哪一步

把问题拆成三段会更快：指针有没有持续到达拖动项，临时位置有没有转换成真实顺序，保存后的列表有没有重新渲染。只看“拖动时卡片能不能移动”不够，因为 transform: translateY() 只改变了绘制位置，DOM 里的兄弟节点顺序可能仍然没有变化。

建议先给拖动状态打三个标记：draggingId、previewIndex 和 committedIndex。如果松手时 previewIndex 有值而 committedIndex 没变，问题在提交；如果移动到列表外就没有新的事件，优先检查指针捕获。

用 pointer capture 保住一次完整拖动

拖动开始时，指针很快就会离开原来的按钮或卡片。如果监听器只绑定在卡片自身，移动到相邻卡片甚至滚动容器后，事件可能不再触发原节点的回调。Pointer Events 提供的捕获机制可以把后续所有指针事件继续交给这个拖动元素处理。

function beginDrag(event) {
  const item = event.currentTarget;
  if (event.button !== 0) return;

  item.setPointerCapture(event.pointerId);
  state.draggingId = item.dataset.id;
  state.pointerId = event.pointerId;
  state.previewIndex = indexOf(item.dataset.id);
  item.classList.add('is-dragging');
}

function moveDrag(event) {
  if (event.pointerId !== state.pointerId) return;
  if (!state.draggingId) return;
  state.previewIndex = findDropIndex(event.clientY);
  renderPreview(state.draggingId, state.previewIndex);
}

function endDrag(event) {
  if (event.pointerId !== state.pointerId) return;
  commitOrder(state.draggingId, state.previewIndex);
  state.draggingId = null;
  state.pointerId = null;
}

捕获只解决“事件还能不能收到”，不代表浏览器会自动替你完成排序。开始、移动、结束和取消都要检查当前 pointerId，否则多指触控时可能把第二根手指的移动误当成第一根拖动。

预览位置和真实顺序必须分开

拖动中的占位效果可以用 class 或 transform 实现得很轻量，但松手确认排序时要把新顺序同步到唯一的数据源。最小实现可以直接根据 ID 数组移动元素，再让渲染层重新输出位置：

function commitOrder(id, targetIndex) {
  if (id == null || targetIndex == null) return;

  const fromIndex = state.order.indexOf(id);
  if (fromIndex 

这里的 state.order 才是“谁排在谁前面”的事实。不要在 pointermove 中不断改服务端，也不要用卡片当前的像素坐标直接当持久化数据。移动过程只产生预览索引，松手或明确取消时才提交。

键盘操作复用同一条提交路径

拖拽并不是唯一的排序方式。给每个条目一个可聚焦的拖动手柄，支持上下移动和取消，用户就不必依赖精细的触摸操作。按钮可以使用 aria-label 说明当前条目，移动成功后再用一个 aria-live 区域播报结果。

function moveWithKeyboard(id, delta) {
  const index = state.order.indexOf(id);
  const target = index + delta;
  if (target = state.order.length) return;

  commitOrder(id, target);
  announce(`${labelOf(id)} 已移到第 ${target + 1} 项`);
}

handle.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') {
    event.preventDefault();
    moveWithKeyboard(handle.dataset.id, -1);
  }
  if (event.key === 'ArrowDown') {
    event.preventDefault();
    moveWithKeyboard(handle.dataset.id, 1);
  }
});

如果键盘移动自己维护一份数组、拖动又维护另一份数组，两个入口很快就会出现不同步。把持久化、撤销记录和成功提示都放在 commitOrder 之后，鼠标和键盘才能得到一致结果。

四组边界场景要逐项验收

1. 把指针拖到列表项外再松开，确认顺序仍然只提交一次，且不会回到旧索引。
2. 在可滚动容器底部拖动，确认滚动后仍能收到 pointermove，松手不会留下半透明拖动态。
3. 拖动中按 Escape，确认调用取消逻辑后恢复原顺序，并释放 pointer capture。
4. 用键盘把首项向上、尾项向下移动，确认边界不会越界，屏幕阅读器能听到新的位置提示。
5. 刷新页面或重新拉取数据，确认服务端保存的是 ID 顺序而不是某次渲染的像素位置。

还要特别检查重复提交：如果 pointerup 和 lostpointercapture 都触发收尾函数，必须通过已结束标记保证 commitOrder 只执行一次。否则页面看起来只是偶发跳动，实际却可能连续保存两次相反的顺序。

常见问题

为什么用了 pointer capture 仍然收不到移动事件？

先确认捕获是在有效的 pointerdown 处理中调用，并且保存了同一个 pointerId。如果中途元素被删除或重新渲染，捕获对象可能已经失效，需要把拖动中的节点保留到结束，再处理列表更新。

拖动时一定要修改 DOM 顺序吗？

不一定。预览阶段可以只改变视觉层，但提交成功后必须让 DOM 顺序、状态数组和服务端顺序完全一致，否则键盘焦点、读屏顺序和刷新结果会互相矛盾。

能不能只用 HTML Drag and Drop？

可以用于简单桌面场景，但触摸、键盘、滚动容器和取消行为需要额外补齐逻辑。如果项目需要同时兼容鼠标、触摸操作和无障碍访问，用 Pointer Events 加统一提交函数的方案通常更容易控制边界场景。

最后把排序逻辑收敛成一个可验证动作

拖拽排序稳定的关键不是把移动动画做得更复杂，而是把事件接收、临时预览和最终提交分层：setPointerCapture 保住事件，预览索引负责反馈，commitOrder 负责唯一落库入口，键盘操作复用同一入口。这样列表即使经历滚动、取消、刷新或屏幕阅读器操作，最终顺序仍有一条清楚可追踪的来源。