前言
vue-dragging 的 npm 包的名字是 awe-dnd，并不是 vue-dragging，
特点 : 封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说， awe-dnd 是没有暴露双向绑定的方式，因此提供了事件，在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件。
如何使用
第一步: 安装
npm install awe-dnd --save
第二步: 引入
main.js 文件
// 引入组件
import VueDND from 'awe-dnd'
// 添加至全局
Vue.use(VueDND)
第三步: 使用
<template>
<div class="color-list">
<div class="color-item"
v-for="item in dataList" v-dragging="{ item: item, list: dataList, group: 'color' }"
:key="color.text">
{{item .text}}</div>
</div>
</template>
<script>
export default {
data () {
return {
dataList: [{
text: "red"
}, {
text: "blue"
}, {
text: "Gold"
},{
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}]
}
}
}
</script>
童鞋们发现一个特殊指令: v-dragging="{ item: item, list: dataList, group: 'color' }"
这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表，group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。
还有提供两个方法:
export default {
mounted () {
this.$dragging.$on('dragged', ({ val }) => {
console.log(val .item)
console.log(val .list)
console.log(val .otherData)
})
this.$dragging.$on('dragend', (res) => {
console.error(res);
})
}
}
