推荐使用 sortablejs 实现 Vue 拖拽排序，因其兼容性好、支持触摸、API 清晰且无需手动同步数据；原生 drag & drop 虽轻量但需处理细节如 dataTransfer、移动端适配及 key 稳定性。

Vue.js 中实现拖拽排序列表，推荐使用 HTML5 原生 drag & drop API 或更稳定的第三方库（如 sortablejs）。原生方案轻量可控，适合简单场景；sortablejs 兼容性好、支持触摸、API 清晰，更适合生产环境。

使用 sortablejs 快速集成拖拽排序

Sortable 是专为排序设计的库，与 Vue 配合良好，不依赖 jQuery，支持 Vue 2 和 Vue 3。

• 安装：npm install sortablejs（Vue 2）或 npm install sortablejs @vueuse/core（Vue 3 + Composition API）
• 在组件中引入并绑定到列表容器（<ul></ul> 或 <div>），确保每个子项有唯一 <code>key
• 初始化时传入 ghostClass、chosenClass 等提升拖拽体验，避免样式跳变
• 监听 end 事件，在回调中同步更新 Vue 的响应式数据（如 list.value 或 this.list）

Vue 3 + Composition API 示例（推荐）

用 @vueuse/core 的 useSortable 更简洁：


Expanso yaml-to-json
使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。
下载
• 模板中给列表容器加 ref="listRef"，子项用 v-for 渲染，带 :key
• 脚本中调用 useSortable(listRef, list, { animation: 150 })，自动处理 DOM 同步
• 无需手动监听事件——内部已将排序结果映射回响应式数组，数据与视图始终一致
• 如需自定义拖拽逻辑（比如跨列表、禁用某项），可配置 filter 或 disabled 属性

原生 drag & drop 实现要点

若倾向零依赖，可用原生 API，但需注意细节：

立即学习“前端免费学习笔记（深入）”；

• 给每个列表项添加 draggable="true"，并监听 dragstart（存索引）、dragover（阻止默认、设 dropEffect）、drop（交换数组项）
• dragstart 中必须设置 dataTransfer.setData()（哪怕只是空字符串），否则 Chrome 不触发 drop
• 拖拽过程中，用 CSS 类（如 .drag-over）标记插入位置，配合 transform: scaleY(0.9) 提示用户正在移动
• 移动端需额外处理 touch 事件模拟 drag，或改用 Sortable（内置触摸支持）

注意事项与优化建议

拖拽排序看似简单，实际易踩坑：

• 务必保证列表项的 key 是稳定唯一标识（如 item.id），避免用 index 导致 Vue 复用错误元素
• 拖拽中禁止触发点击事件：给拖拽元素加 @click.stop 或判断 event.detail === 0
• 长列表建议开启虚拟滚动（如 vue-virtual-scroller），否则拖拽时卡顿明显
• 服务端保存排序后，前端应加 loading 状态和失败回滚机制，避免 UI 与数据不一致