el-checkbox实现拖动调整顺序

1.下载插件

npm install awe-add --save

2. 在main.js中引入使用

import VueDND from 'awe-dnd';
Vue.use(VueDND);

3.项目中使用

<template>
    <div>       
        <el-checkbox-group v-model="checkedCities">
            <el-checkbox
                    v-for="city in cities"
                    :label="city.label"
                    :key="city.id"
                    v-dragging="{ item: city, list: cities, group: 'city' }">{{city.label}}
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
        return {
            checkAll: false,
            checkedCities: [
                {
                    id: 1,
                    label: '上海'
                }, {
                    id: 2,
                    label: '北京'
                }
            ],
            cities: [
                {id: 1, label: '上海'},
                {id: 2, label: '北京'},
                {id: 3, label: '广州'},
                {id: 4, label: '深圳'}],
            isIndeterminate: true
        }
    },
    mounted() {
        this.$dragging.$on('dragged', ({value}) => {
            // console.log(value.item)
            console.log(value.list) //排序后的数组
            // console.log(value.group)
        })
        this.$dragging.$on('dragend', () => {

        })
    }
    }
}
</script>