vue复选框实现拖拽排序

1、安装
通过NPM安装

$ npm install awe-dnd --save

2、插件应用
在main.js中，通过Vue.use导入插件

import VueDND from 'awe-dnd'

Vue.use(VueDND)

3、在vue2.0中使用

<template>
	<div>
		<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
		<div style="margin: 15px 0;"></div>
		<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
		<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>
	const cityOptions=[
			{id:1,label:'上海'},
			{id:2,label:'北京'},
			{id:3,label:'广州'},
			{id:4,label:'深圳'}
		];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: [
			{
			id:1,
			label:'上海'
			},{
			id:2,
			label:'北京'
			}
		],
        cities: cityOptions,
        isIndeterminate: true
      }
    },
	mounted () {
	    this.$dragging.$on('dragged', ({ value }) => {
	      console.log(value.item)
	      console.log(value.list) //排序后的数组
	      console.log(value.group)
	    })
	  this.$dragging.$on('dragend', () => {
	      
	  })
	},
    methods: {
        handleCheckAllChange(val) {
		  this.checkedCities = val ? cityOptions : [];
		  this.isIndeterminate = false;
		},
	    handleCheckedCitiesChange(value) {
		  let checkedCount = value.length;
		  this.checkAll = checkedCount === this.cities.length;
		  this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
		}
    }
  }
</script>

通过拖动可以实现效果如下：


组件地址：拖拽排序组件