Vue + element need to use drag and drop components vuedraggable

The new demand is to require 14 can drag on the screen, then drag the order to save after clicking Save.

After determining the demand is certainly the first time that Baidu, found a plug vuedragger drag, follow the tutorial on the ignorant began.

Official Example: https://david-desmaisons.github.io/draggable-example/

1. Install

npm install vuedraggable

2. Introduction

import draggable from 'vuedraggable'

 

3. Registration

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-related processing

getData (EVT) { 
    the console.log (evt.draggedContext.filterKey) 
    // where subsequent contents depending evt.draggedContext defined variable depending 
}, 
datadragEnd (EVT) { 
    evt.preventDefault (); 
        the console.log ( 'dragging '+ evt.oldIndex): before the movable index 
        (index of the drag:' + evt.newIndex) the console.log ' 
        this.checkMenusList = [] 
        this.tableData.map ((Item, index) => { 
          the this. checkMenusList.push ({sortNum: + index +. 1 "", menuId: item.id, rovinceCode: this.page.token}) 
          return this.checkMenusList 
        }) 
}

index: get subscript after dragging, backstage pass, according to sortNum sort.