新需求是要求界面上的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" > </el-checkbox> </transition-group>
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排序。
Vue+element 需要用到拖拽组件 vuedraggable
原文：https://www.cnblogs.com/2001-/p/11164722.html