vue3+vuedraggable 实现重排数组对象顺序
创始人
2024-06-03 15:35:37

前提
vue3+ant-design-vue3 管理后台项目
业务需求：前端实现数组对象数据顺序可修改，并将修改传递给后台；
依赖版本：
“vue”: “^3.2.37”,
“ant-design-vue”: “^3.2.11”,
“vuedraggable”: “^4.1.0”,
秉承着能不造轮子就不造轮子的原则，选择了成熟的vuedraggable拖拽库
实现的效果如下：

在这里插入图片描述

引入vuedraggable

  • npm or yarn
yarn add vuedraggable@nextnpm i -S vuedraggable@next
  • 项目应用

vuedraggable简单示例
这里值得注意的是 item 这个slot是必须存在的，也就是你不需要在用v-for去遍历数组了，vuedraggable4.0这里给你处理了你只需要在**#item=“{ element }”**这里面去处理就好了，这个语法是固定的不要去更改；

注意1：如果你想直接对数组进行更改可以用:list去绑定，如果不想可以用v-model
注意2：group=“label” 是对自身进行拖拽，两个相互拖拽用people
注意3：