标签页拖拽排序需同步DOM结构、激活态、内容区、框架数据和键盘焦点五者，常见错误是未在容器上阻止dragover默认行为或未用稳定ID作key导致状态错乱。
标签页（tab）做拖拽排序，不能直接套用普通列表逻辑——tab 通常带状态切换、内容联动、焦点管理，原生 dragstart/drop 一搞就丢激活态或内容错位。核心得先稳住 DOM 结构和 JS 状态同步，再谈拖拽。
为什么给 tab 标签加 draggable="true" 后拖不动
常见错误是只在 <li> 或 <button> 上设 draggable="true"，却没处理容器的 dragover 阻止默认行为。浏览器默认把 drop 当文件下载拦截，不显式调 e.preventDefault()，松手瞬间就回弹。
- 必须在 tab 容器（如
<ul class="tabs">）上监听dragover，且每次触发都调e.preventDefault() -
tab项若含<span>、<svg>等子元素，e.target可能不是 tab 根节点，要用e.target.closest('button')或e.target.closest('[role="tab"]')定位 - 别给整个 tab 容器设
draggable="true"，否则会拖整块区域，失去单个 tab 控制权
drop 时怎么插到正确位置而不跳页或闪动
标签页常配合 display: none 切换内容区，如果拖拽过程中 DOM 移动触发重排，可能让当前激活的 tab 内容意外隐藏。关键不是“插哪”，而是“插完立刻恢复状态”。
- 在
drop回调里，先用insertBefore()或before()移动 tab 元素，再手动调用一次click()或设置aria-selected="true"恢复激活态 - 避免用
appendChild()往末尾硬加——用户想把 tab A 插到 B 和 C 之间，结果 A 跑到最后，体验断裂 - 如果 tab 关联了
<div role="tabpanel">，DOM 移动后需同步更新对应 panel 的顺序，否则aria-controls指向失效
拖拽中如何提示“插在第几个位置”，而不是只高亮整个 tab
单纯 hover 改背景色没用：拖着 tab 经过两个 tab 之间的缝隙时，hover 不触发；用户需要知道“松手后它会卡在 B 上方还是下方”。得靠坐标计算。
立即学习“前端免费学习笔记（深入）”；
- 在
dragover中，用e.clientY对比目标 tab 的getBoundingClientRect().top和.bottom - 若鼠标 Y 坐标落在上半区（
e.clientY < top + (bottom - top) / 2），就在该 tab 上方加一条border-top: 2px dashed #007bff；下半区则加border-bottom - 插入线样式必须用
pointer-events: none，否则会干扰后续拖拽事件捕获
Vue/React 中 tab 拖拽后数据没变？问题出在哪儿
框架里最常踩的坑是：DOM 排序了，但源数组没更新，下次 re-render 直接打回原形。不是拖拽逻辑错了，是状态没同步。
- Vue 场景下，别在
@sort或@dragend里直接赋值this.tabs = [...]，要等this.$nextTick()后再操作，确保 DOM 已就位 - React 用
@dnd-kit/sortable时，onDragEnd必须用函数式更新：setTabs(tabs => arrayMove(tabs, oldIndex, newIndex))，否则oldIndex在闭包里会 stale - 所有 tab 的
key必须基于稳定 ID（如tab.id），绝不能用index——拖拽一动，索引全乱，组件状态直接丢失
真正难的不是拖拽动作本身，而是拖完那一帧：DOM 位置、激活态、关联内容区、框架数据、键盘焦点——五者必须同时对齐。少同步一个，用户就会觉得“卡了一下”或者“点开的不是刚才那个 tab”。
