vue 使用vuedraggable 實現列表拖拽排序

首先安裝  npm install vuedraggable --save

頁面使用時引入
import Draggable from 'vuedraggable'

export default {
  name: "draggable",
  components: {
    Draggable
  },
  data(){
    return {
      tableData:[
          {id:'1',name:'111111'},
          {id:'2',name:'222222'},
          {id:'3',name:'333333'},
          {id:'4',name:'444444'}
      ]
    }
  }
}

簡單的使用

<draggable v-model="tableData">
  <div v-for="item in tableData" :key="item.id" class="item">
    {{item.name}}
  </div>
</draggable>