可拖拽排序的vue组件

最近在优化一个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

作者：real_ting 链接：https://www.jianshu.com/p/7afcf8a7af75 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。