Vue.js拖拽排序组件vuedraggable使用详解

Bash
npm install vuedraggable@next sortablejs

vue

   v-model="list" item-key="id">
     #item="{ element }">
       class="item">
        {{ element.name }}
      

    
  


 setup>
import { ref } from "vue"
import draggable from "vuedraggable"

const list = ref([
  { id: 1, name: "任务A" },
  { id: 2, name: "任务B" },
  { id: 3, name: "任务C" }
])

这一段代码已经实现了完整的拖拽排序能力，不需要额外逻辑。

三、Vue2中的写法差异

Vue2 使用方式略有不同：

vue

   v-model="list" :options="options">
     v-for="item in list" :key="item.id">
      {{ item.name }}
    

  



import draggable from "vuedraggable"

export default {
  components: { draggable },
  data() {
    return {
      list: [],
      options: {
        animation: 150
      }
    }
  }
}

Vue2 版本更依赖 options 配置，而 Vue3 更偏向 props 化设计。

四、常用配置参数解析

vuedraggable 提供了丰富的配置能力，常用参数包括：

• animation：拖拽动画时长

• disabled：是否禁用拖拽

• ghost-class：拖拽占位样式

• chosen-class：选中状态样式

• drag-class：拖拽过程样式

示例：

vue

  v-model="list"
  item-key="id"
  :animation="200"
  ghost-class="ghost"
  chosen-class="chosen"
>

合理使用这些配置可以显著提升用户体验。

五、分组拖拽（跨列表拖动）

在电商后台或任务管理系统中，经常需要实现“跨列表拖拽”。

vue
 v-model="todo" group="task" />
 v-model="done" group="task" />

只要 group 相同，两个列表之间的数据就可以自由拖动。

六、禁止拖拽与权限控制

实际项目中，拖拽往往需要权限控制，例如管理员才能调整顺序。

vue
 :disabled="!isAdmin" v-model="list" />

也可以对单个元素设置不可拖拽：

HTML
 class="item" :data-id="item.id" :draggable="false">

七、拖拽后数据持久化

拖拽完成后，数组顺序已经变化，但通常需要同步到后端。

JavaScript
function onEnd() {
  saveListOrder(list.value)
}

也可以监听 change 事件：

vue
 v-model="list" @change="onChange" />

后端一般只需要接收 id 顺序数组即可。

八、常见问题与优化方案

1. 拖拽卡顿

通常是列表过大导致 DOM 渲染压力过高，可以考虑：

• 使用虚拟列表

• 减少复杂节点

• 优化 key

2. key 设置错误

必须使用唯一 id，否则会出现错位问题。

HTML
item-key="id"

3. 嵌套拖拽冲突

多个 draggable 嵌套时，需要合理设置 handle：

vue
 handle=".handle" />

九、进阶应用：看板系统实现

在任务看板（类似 Trello）中，vuedraggable 是核心技术之一：

• 列表代表列

• item 代表任务卡片

• group 控制跨列拖动

结合接口同步，可以快速实现完整看板系统。

十、性能优化建议

在大数据场景下建议：

• 使用分页或懒加载

• 减少 DOM 层级

• 避免复杂计算绑定在 item 上

• 使用纯展示组件拆分 draggable 内容

vuedraggable 的价值在于，它把复杂的拖拽交互封装成声明式组件，让开发者只需要关注数据结构，而不是 DOM 操作逻辑。在 Vue 体系中，它几乎是实现拖拽排序的标准方案。

推荐模板

律师事务所网站模板整站源码

¥80

财务财税企业记账网站模板整站源码

¥80

招标投标信息网站模板整站源码

¥80

机电设备网站模板 - 产品带视频 带三级栏目

¥80

LED照明灯具网站模板整站源码 - 带三级栏目

¥80

推荐服务

单页仿站