推荐两种Vue 3集成Sortable.js方式：一是直接使用原生Sortable.js，轻量可控，适合精细定制；二是使用vue.draggable.next，专为Vue 3设计，响应式友好、开发高效。
Vue 3 项目集成 Sortable.js 实现拖拽排序，推荐两种主流方式：直接使用原生 Sortable.js 手动控制，或选用封装好的 Vue 专属组件 vuedraggable（即 vue.draggable.next）。前者更轻量、可控性强；后者更贴合 Vue 响应式习惯，开发效率高。选哪种取决于你对定制性与开发速度的权衡。
直接集成 Sortable.js（零依赖、高度可控）
适合需要精细控制拖拽行为、跨容器交互、或已有 DOM 结构不便改造的场景。
- 安装：
npm install sortablejs - 在组件中获取目标容器 DOM（如
<ul>或el-table__body-wrapper tbody），用onMounted + nextTick确保元素已挂载 - 初始化时传入关键配置：
group（支持跨列表交换）、animation（建议 150–200ms）、ghostClass（拖拽占位样式）、handle（可选拖拽手柄选择器） - 在
onEnd回调里同步数据：用splice操作响应式数组，注意旧索引和新索引可能因 DOM 变化而偏移，nextTick内更新更稳妥
使用 vue.draggable.next（Vue 3 原生适配）
这是目前 Vue 3 生态中最推荐的方案，专为 Composition API 和响应式系统设计，无需手动操作 DOM。
- 安装：
npm install vuedraggable（v4.x 起默认支持 Vue 3，无需加@next） - 基础写法：用
<draggable>包裹列表，绑定v-model到响应式数组，必须设置item-key（如"id"）用于正确 diff - 常用属性：
tag="ul"控制外层标签；group="tasks"开启跨列表拖拽；handle=".drag-icon"限定仅图标可拖；animation="200"启用平滑过渡 - 插槽用法：
#item="{ element }"渲染每一项，element即当前数据项，支持任意结构（含 Element Plus 表格行）
Element Plus 表格（el-table）特殊处理
el-table 默认不提供 tbody 的直接访问入口，需通过 class 定位其内部 tbody 元素：
立即学习“前端免费学习笔记（深入）”；
- 给
<el-table>添加自定义类名，如class="sortable-table" - 在
onMounted中查找：document.querySelector('.sortable-table .el-table__body-wrapper tbody') - 创建 Sortable 实例时，确保
disabled: false且filter: ':not(.no-drag)'（可选）避免某些行被误拖 - 若表格启用分页或筛选，拖拽后需重新触发排序逻辑，或暂禁用过滤状态以保证索引准确
样式与体验优化要点
拖拽过程中的视觉反馈直接影响用户感知，不可忽略：
- 定义
.ghost类：半透明背景 + 边框色变化，表示占位位置 - 定义
.chosen类：缩放或阴影增强，突出当前拖拽项 - 定义
.drag类：轻微旋转或位移，强化拖拽状态 - CSS 中为拖拽容器添加
cursor: move，子项加user-select: none防止文字选中干扰
