checkbox拖动排序

先下载依赖包

// 通过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', () => {})
    },