最近在优化一个vue的博客系统，想实现文章列表处的文章拖拽功能。就试了一下awe-dnd vue插件，觉得还挺好用的。
安装
npm install awe-dnd --save
使用
在main.js中，通过Vue.use引入
import VueDND from 'awe-dnd'
Vue.use(VueDND)
在vue文件中的使用
<template>
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
:key="color.text"
>{{color.text}}</div>
</div>
</template>
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
},
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}
</script>
组件参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| item | Object | - | 每一个可拖拽的对象 |
| list | Array | - | 可拖拽对象的数组 |
| group | String | - | 这是一个dragging list的unique key |
拖拽完成之后，需要把新的数组顺序提交到后台，创建一个sort_order字段保存顺序。
参考： 可拖动排序的vue组件 , github
