拖拽排序vue组件

由于项目一开始用的jquery，因此当时找的拖拽排序插件是jquery-ui。而后最近想着是否是也能够用vue来作拖拽排序，前期找了几个，可是好像是不支持v2.0的，而后在思否恰好看到一篇文章，也是讲拖拽排序组件的，而后本身就跟着弄下来试了试。

安装

npm install awe-dnd --save

main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

sortable.vue

<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> <script> export default { data () { return { colors: [{ text: "Aquamarine" }, { text: "Skyblue" }, { text: "Burlywood" }] } }, //这里挺重要的，由于咱们通常排序完要从新提交排序后的数据给后台保存，以便下一次安装咱们所须要的顺序显示，这里的list就能够帮咱们作到这一点，可是咱们须要给数据添加一个uniqueId标志。而后在排序完后或者列表对应的顺序和uniqueId提交给后台，我也不知道我说的咋样。 mounted () { this.$dragging.$on('dragged', ({ value }) => { console.log(value.item) console.log(value.list) console.log(value.group) }) } } </script> <style> .color-item{ border:1px solid #f1f1f1; padding:10px 5px; margin:5px 0; border-radius: 4px; } </style>

  排序完后的操做挺重要的，由于咱们通常排序完要从新提交排序后的数据给后台保存，以便下一次安装咱们所须要的顺序显示，这里的list就能够帮咱们作到这一点，可是咱们须要给数据添加一个uniqueId标志。而后在排序完后或者列表对应的顺序和uniqueId提交给后台，我也不知道我说的大家能理解吗，反正大家也能够打印出来看看。

效果

参考：可任意拖动排序vue组件