拖拽排序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组件