1. 前言
这算是一个非常不错的库了,直接可以使用并进行拖拽!
npm地址:
https://www.npmjs.com/package/awe-dnd
2. 使用
2.1. 安装
npm install awe-dnd --save
2.2. 使用
注册
//main.js
import VueDND from 'awe-dnd'
Vue.use(VueDND)
全局注册
使用
在需要用的地方:
<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不知道什么(官方:group is unique key of dragable list.),没管
这样设置后,就可以在Mounted里面使用:
export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}
然后排序后,就可以进行想要的操作了;
比如我这里进行的操作是:
获取到整个数据(数组),也就上面的value.list
这个数据是排序后的,所以我们遍历这个之后就可以得到整个数据的顺序,然后进行相应的操作;
3. Demo
官方Demo:https://hilongjw.github.io/vue-dragging/