先下载依赖包
// 通过npm安装
$ npm install awe-dnd --save
在main.js里使用vue.use使用
// checkbox拖动调整顺序
import VueDND from 'awe-dnd'
Vue.use(VueDND)
在vue2中使用
<el-checkbox-group v-model="checkData" @change="cancelSelect">
<el-checkbox
v-for="item in hoverMenu"
:key="item.cdbh"
v-model="checkData"
:label="item"
v-dragging="{
item: item,
list: hoverMenu,
group: 'data',
}"
>
{{ item.cdmc }}
</el-checkbox>
</el-checkbox-group>
获取相应的值
mounted() {
// checkbox拖动排序
this.$dragging.$on('dragged', ({ value }) => {
// console.log(value.item)
// console.log(value.list) //排序后的数组
this.menuList = value.list.map((item, index) => {
return {
name: item.name,
age: item.age,
sex: item.sex,
address: item.address,
px: index,
}
})
console.log(this.menuList)
// console.log(value.group)
})
this.$dragging.$on('dragend', () => {})
},