前端拖拽排序怎么保留键盘操作：Drag and Drop API、焦点恢复与提交校验

产品发布页常见一个看似简单的交互：把“草稿、预览、发布”拖成正确顺序。鼠标用户可以直接拖动，但只给元素加 draggable 并不能让键盘用户完成同一件事；焦点还可能在移动后丢掉，服务端拿到的顺序也未必是页面当前顺序。

先把排序任务拆成三种状态

可访问的排序组件不是“给卡片加一个拖动图标”这么简单。每一行至少要回答三件事：当前排在第几位、是否被键盘选中、移动后顺序是什么。底部状态播报则把这次移动告诉辅助技术。下面的示例只有三个状态，正好能观察状态变化而不会被业务细节淹没。

Drag and Drop API 只处理鼠标拖放数据

MDN 对 HTML Drag and Drop API 的基本边界很明确：在 dragstart 中写入 DataTransfer，在 drop 中读取并按目标位置调整节点。示例把业务值写成纯文本，避免把整段 HTML 当成拖放数据。

row.addEventListener('dragstart', event => {
  event.dataTransfer.setData('text/plain', row.dataset.value);
  event.dataTransfer.effectAllowed = 'move';
});

row.addEventListener('drop', event => {
  event.preventDefault();
  const from = [...list.children].find(
    item => item.dataset.value === event.dataTransfer.getData('text/plain')
  );
  if (from && from !== row) list.insertBefore(from, row);
  renumber();
});

这里别把 dragover 忘了：目标需要取消默认行为，浏览器才会把它当成可放置区域。拖放结束后要调用同一个 renumber()，否则屏幕上的“第 1 项”会和 DOM 顺序脱节。

键盘路径要有明确的选择与确认

键盘路径不必模拟鼠标拖动。更稳的做法是让每行有一个真正的 button 抓手：Tab 能进入，Enter 把当前行置为 selected，方向键改变 DOM 顺序，再按 Enter 结束选择。这样焦点仍在按钮上，用户知道下一次方向键会影响谁。

grip.addEventListener('keydown', event => {
  if (!selected && event.key === 'Enter') {
    selected = row;
    grip.setAttribute('aria-pressed', 'true');
    announce(`已选择${row.dataset.value}，使用方向键移动`);
    event.preventDefault();
    return;
  }
  if (selected !== row) return;
  if (event.key === 'ArrowUp' && row.previousElementSibling) {
    list.insertBefore(row, row.previousElementSibling);
  }
  if (event.key === 'ArrowDown' && row.nextElementSibling) {
    list.insertBefore(row.nextElementSibling, row);
  }
  if (event.key === 'Enter') {
    selected = null;
    grip.setAttribute('aria-pressed', 'false');
    announce('键盘排序完成');
  }
  renumber();
  event.preventDefault();
});

示例用 aria-pressed 暴露选择状态，用 aria-live="polite" 播报顺序变化。WAI-ARIA 角色和状态应该描述真实控件当前状态，不能只用颜色表达“正在移动”。

提交前重新读取 DOM，并保留服务端校验

排序按钮点击时不要依赖一份可能过期的数组。直接从 list.children 读取当前顺序，再发送值列表；服务端还要检查值是否属于允许集合、是否重复，以及当前用户是否有修改这个发布流程的权限。

save.addEventListener('click', async () => {
  const order = [...list.children].map(item => item.dataset.value);
  const response = await fetch('/api/release-order', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({order})
  });
  if (!response.ok) throw new Error(`保存失败：${response.status}`);
  announce('提交成功');
});

常见误区：焦点、触屏和重复值

• 移动节点后不要重新创建整棵列表，否则焦点会跳回页面顶部；只移动现有节点并保留按钮焦点。
• 原生 Drag and Drop 在触屏设备上的体验并不等于鼠标体验，移动端可以额外提供上移、下移按钮。
• 不要只提交数组下标；用稳定的业务值，服务端再校验允许集合。
• 拖放和键盘都调用同一个 renumber() 与提交读取函数，避免两条逻辑产生不同结果。

常见问题

为什么 draggable=true 还不能键盘排序？

draggable描述拖放能力，不会自动生成选择、移动和确认的键盘交互，需要自己提供焦点可达的按钮或其他原生控件。

方向键移动后要不要修改 aria-posinset？

如果组件使用了带位置语义的自定义模式，应同步位置状态；本示例直接更新可见编号，并用 live 区域播报最终顺序，避免只让屏幕阅读器看到过期位置。

拖放数据应该放完整对象吗？

不建议。示例只传稳定的业务值，服务端根据允许集合重新核对，避免把可执行或未经验证的页面内容当成可信数据。

验收清单

最后用 Tab 走到每个抓手，Enter 选择，按一次方向键，再按 Enter 确认；检查蓝色选中状态、顺序播报、编号和提交值是否一致。再用鼠标拖动同一项，确认两条路径都经过相同的编号和提交逻辑。