vue项目利用vuedraggable实现拖拽排序

1.安装拖拽排序工具vuedraggable

yarn 或 npm 安装

yarn add vuedraggable
 
npm i -S vuedraggable

2.引入vuedraggable组件

script部分

import draggable from 'vuedraggable'
...
export default {
      components: {
          draggable,
      },
      data(){
      	return {
      		myArray:[]
      	}
      }
...

3.使用vuedraggable组件

template部分，注意v-model和for循环的都是同一个数组

<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>