Vue+element 須要用到拖拽組件 vuedraggable

新需求是要求界面上的14個能夠拖拽，點擊保存以後保存拖拽以後的順序。

肯定需求以後確定第一時間是百度，發現有個插件vuedragger拖拽，按照教程就懵懂的開始了。

官方示例：https://david-desmaisons.github.io/draggable-example/

1.安裝

npm install vuedraggable

2.引入

import draggable from 'vuedraggable'

 

3.註冊

components: { 

draggable

}

html

<draggable @update="datadragEnd" :options = "options" v-model="tableData" style='sort: false' >
　　<transition-group >
　　　　<el-checkbox @change="handleCheckedCitiesChange(item.id)" v-model="checkList" v-for="item in tableData" :key="item.id" :label="item.id" :disabled="isDisabled" >
　　　　　　<img style="width:150px;height:150px;" :src="item.img" alt="" >
　　　　</el-checkbox>
　　</transition-group>

</draggable>

　js相關處理

getdata(evt) {
    console.log(evt.draggedContext.filterKey)
    //這裏evt.draggedContext後續的內容根據具體的定義變量而定
},
datadragEnd(evt) {
    evt.preventDefault();
        console.log('拖動前的索引 :' + evt.oldIndex)
        console.log('拖動後的索引 :' + evt.newIndex)
        this.checkMenusList = []
        this.tableData.map((item,index) =>{
          this.checkMenusList.push({sortNum: index+1+"", menuId: item.id,rovinceCode:this.page.token})
          return  this.checkMenusList
        })
}

index：獲取拖拽後的下標，傳給後臺，按照sortNum排序。