draggable属性仅启用拖拽事件，不自动更新DOM位置；需手动处理drag事件链、阻止dragover默认行为、用dataTransfer或WeakMap传数据、支持键盘与无障碍操作。
draggable 属性本身不触发重排，必须手动处理 drag 事件链
仅设置 draggable="true" 只会让元素变可拖，但拖拽过程中不会自动交换 DOM 位置，也不会产生视觉反馈。浏览器只派发 dragstart、dragover、drop 等事件，所有排序逻辑和 DOM 更新都得自己写。
常见错误是监听了 drop 却没阻止 dragover 的默认行为，导致 drop 根本不触发——因为浏览器默认禁止在非表单/链接元素上投放。
- 必须在
dragover回调中调用event.preventDefault() -
dragstart中通过event.dataTransfer.setData()记录被拖项的索引或 ID（如dataTransfer.setData('text/plain', String(index))） -
drop时读取数据，并用insertBefore()或appendChild()调整目标父容器内的子节点顺序
tab 标签页排序需区分「同容器内拖拽」和「跨容器拖拽」
编辑器里 tab 常分布在多个区域：主编辑区、侧边栏、浮动面板。单纯靠 draggable 无法跨父节点移动，必须统一管理拖拽状态，用全局变量或 Context 记录当前拖拽源和允许的目标容器。
例如，把所有 tab 容器设为 dropzone，并在 dragenter 中判断是否为合法目标：event.target.matches('.tab-container')；再结合 data-tab-type 属性过滤是否允许接收（比如禁止把代码 tab 拖进调试控制台）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 同容器排序：用
Array.from(container.children)获取当前顺序，计算鼠标位置最近的相邻 tab 元素，插入其前/后 - 跨容器拆分：
drop时从原父节点removeChild()，再appendChild()到新容器；注意触发新容器的布局重绘（如调整 CSS Grid 的grid-template-columns） - 避免频繁重排：拖拽中不要实时移动 DOM，改用
transform: translate()模拟悬浮效果，只在drop后批量更新结构
Firefox 对 dataTransfer.getData 兼容性差，别依赖它传复杂数据
Firefox 在 drop 事件中常返回空字符串，即使 dragstart 正确设置了 dataTransfer.setData('text/plain', ...)。这不是 bug，是规范允许的“安全限制”——尤其跨 origin 或 iframe 时更不可靠。
稳妥做法是把拖拽元数据存在全局 Map 或 WeakMap 中，用 event.dataTransfer 的唯一 ID（如 event.dataTransfer.effectAllowed 配合时间戳生成 key）做索引，而非依赖 getData() 返回值。
- 推荐方案：
const dragState = new WeakMap(); dragState.set(event.dataTransfer, { sourceTab: tabEl, sourceIndex: i }); - 在
drop回调里用dragState.get(event.dataTransfer)拿回上下文 - 务必在
dragend清理dragState，防止内存泄漏
键盘辅助与无障碍支持常被忽略，但影响真实可用性
仅靠鼠标拖拽对键盘用户和屏幕阅读器完全不可用。WCAG 要求提供替代操作路径：比如按住 Tab 键 + 方向键调整顺序，或右键菜单「移到左侧/右侧」「拆分为新面板」。
原生 draggable 不提供键盘拖拽语义，必须额外实现 role="application" 和 aria-grabbed 状态切换，并监听 keydown 中的 ArrowLeft/ArrowRight。
- 给每个 tab 添加
tabindex="0"，支持键盘聚焦 - 聚焦后按
Space进入“抓取模式”，再按方向键触发moveTab(index, offset) - 用
aria-dropeffect="move"和aria-label描述操作意图（如 “拖拽至此可将终端标签页移入右侧面板”）
真正难的不是拖拽逻辑本身，而是让拖拽动作可预测、可中断、可撤销，且在缩放、高对比度、无鼠标等场景下依然有效。这些细节不写进代码，光靠 draggable="true" 是撑不起一个编辑器级体验的。
