JavaScript实现标签页拖拽排序需监听dragstart、dragover、drop事件，通过dataTransfer存标识、getBoundingClientRect计算位置、insertBefore等DOM操作完成排序，并处理边界及移动端兼容。
用 JavaScript 实现标签页拖拽排序，核心是监听 dragstart、dragover、drop 事件，配合 DOM 元素的插入位置控制（如 insertBefore 或 append），不依赖第三方库也能完成干净的交互。
启用拖拽并标记被拖项
每个标签页（比如 <li class="tab">）需设置 draggable="true"，并在 dragstart 中记录其索引或引用：
- 在
dragstart里用dataTransfer.setData("text/plain", index)存下序号，或直接存 DOM 元素引用（推荐用dataTransfer.setData("text/tab-id", tab.id)避免跨域限制） - 为视觉反馈，可临时加 CSS 类（如
tab.dragging）隐藏自身或降低透明度
实时计算插入位置
当拖拽经过其他标签时，dragover 会持续触发。关键是在该事件中阻止默认行为（否则无法触发 drop），并判断鼠标靠近哪个目标标签的上半/下半区域：
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 用
event.clientY和目标元素getBoundingClientRect()计算相对位置 - 若鼠标在目标元素顶部 50% 区域，表示应插到它前面；否则插到它后面
- 用
element.classList.add("drop-before")等临时样式提示用户即将插入的位置
在 drop 时重新排列 DOM
drop 事件触发后，取出被拖元素，根据上一步判断的位置，用原生 DOM 方法移动它：
立即学习“Java免费学习笔记（深入）”；
- 若目标是“插到 A 前面”，调用
tabsList.insertBefore(draggedTab, targetTab) - 若目标是“插到 A 后面”，可用
targetTab.parentNode.insertBefore(draggedTab, targetTab.nextSibling) - 务必在
drop中调用event.preventDefault()，否则浏览器可能执行默认跳转或下载行为
补充细节提升体验
真实场景中还需处理边界情况：
- 拖出标签栏区域时，及时清除高亮样式和临时类
- 避免把标签拖到自己身上——在
dragover中用event.target === draggedTab过滤 - 排序完成后，同步更新数据源（如数组），并触发自定义事件（如
taborderchange）供业务逻辑响应 - 移动端不支持原生 drag API，需用
touchstart/move/end模拟，或引入轻量库如interact.js
