vue项目添加拖拽功能

客户突然新增一个需求，菜单可以拖拽排序！！！！总是突然提一些脑抽的需求！！！

首先安装vue拖拽的插件，安装依赖包 npm install vuedraggable

然后呢就可以在项目中使用啦

import draggable from "vuedraggable"

<draggable

 v-model="navList"

forceFallBack="true"

animation="1000"

style="display:flex;flex-wrap:wrap"

@start="onStart"

@end="onEnd"

@sort="handleSortChange">

/***中间部分就是循环遍历菜单项*/

<el-card 

shadow="always"

v-for="(item,index) in navList"

:key="item.id"

></el-card>

</draggable>

handleSortChange(val){

const targetRow=this.navList.splice(val.oldIndex,1)[0];

this.navList.splice(val.newIndex,0,targetRow)

let newArr = this.navList.splice(0)

this.navList = []

this.navList = newArr;

}