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>