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>
通过拖动可以实现效果如下:
组件地址:拖拽排序组件