Vue 拖拽组件 vuedraggable 和 vue-dragging
一、描述
知道 vue 肯定是有组件存在的，因此就直接搜了搜，找了两个不同的库分别是：
两个库的里面不同，一个是直接进行组件封装，一个是进行指令封装。
二、vuedraggable
vuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。
使用方式：
yarn add vuedraggable
import vuedraggable from 'vuedraggable';
在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。
引入后直接声明该组件然后使用即可，示例代码：
<template>
<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>
</template>
<script>
import vuedraggable from 'vuedraggable';
export default {
name: 'HelloWorld',
components: {vuedraggable},
props: {
},
data() {
return {
list: [1,2,34,4,54,5]
}
},
updated() {
console.log(this.list)
},
methods: {
}
}
</script>
<style scoped>
.wrapper {
display: flex;
justify-content: center;
width: 100%;
}
.item{
width: 300px;
height: 50px;
background-color: #42b983;
color: #ffffff;
}
</style>
实现的效果：
22.gif
官方的示例：
官方的示例 gif：
https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif
更多的事件及使用方法请参阅：
三、Awe-dnd
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);
})
效果：
223.gif
