## :-: Vue 拖拽组件 vuedraggable 和 vue-dragging # 一、vuedraggable vuedraggable在使用的时候，可以通过`v-model`来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在`updated()`中去`emit`。 安装： ``` npm install vuedraggable yarn add vuedraggable ``` 使用： ``` <template> <div> <vuedraggable class="wrapper" v-model="list"> <transition-group> <div v-for="item in list" :key="item" class="item"> <p>{{item}}</p> </div> </transition-group> </vuedraggable> </div> </template> <script> import vuedraggable from 'vuedraggable' export default { components: { vuedraggable }, data () { return { list: [1, 2, 34, 4, 54, 5] } }, updated () { console.log(this.list) }, methods: { }, mounted () { } } </script> <style lang="less" scoped> .wrapper { display: flex; justify-content: center; width: 100%; } .item{ width: 300px; height: 50px; background-color: #42b983; color: #ffffff; } </style> ``` # 二、awe-dnd [vue-dragging](https://github.com/hilongjw/vue-dragging)的 npm 包的名字是`awe-dnd`，并不是 vue-dragging，这个库的特点是封装了`v-dragging`全局指令，然后通过全局指令去数据绑定等。 相比及 vuedraggable 来说， awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。 安装： ``` npm install awe-dnd --save yarn add awe-and ``` 使用： ``` import VueDND from 'awe-dnd' Vue.use(VueDND) <!--your.vue--> <script> export default { data () { return { colors: [{ text: "Aquamarine" }, { text: "Hotpink" }, { text: "Gold" }, { text: "Crimson" }, { text: "Blueviolet" }, { text: "Lightblue" }, { text: "Cornflowerblue" }, { text: "Skyblue" }, { text: "Burlywood" }] } }, /* if your need multi drag mounted: function() { this.colors.forEach((item) => { Vue.set(item, 'isComb', false) }) } */ } </script> <template> <div class="color-list"> <div class="color-item" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }" :key="color.text" >{{color.text}}</div> </div> </template> ``` 可以发现绑定的时候`v-dragging="{ item: color, list: colors, group: 'color' }"`这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表，group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。 而提供的两个事件方法如下： ``` export default { mounted () { this.$dragging.$on('dragged', ({ value }) => { console.log(value.item) console.log(value.list) console.log(value.otherData) }) this.$dragging.$on('dragend', (res) => { console.error(res); }) } } ``` 一般使用的方法就是： ``` this.$dragging.$on('dragend', (res) => { console.error(res); }) ```