vue+element+vuedraggable实现拖拽排序

vue+element+vuedraggable实现拖拽排序

准备工作

首先使用 yarn add vuedraggable 或者 npm i -S vuedraggable 安装组件。

<draggablev-model="codeList"@update="datadragEnd":options="{ animation: 200 }"
><div class="drag-item" v-for="(item, i) in codeList" :key="i"><el-row><el-col class="line" :span="6">&nbsp;{{ item.field_title }}</el-col></el-row></div>
</draggable>

import draggable from "vuedraggable";
async datadragEnd(evt) {evt.preventDefault();// console.log('拖动前的索引 :' + evt.oldIndex)// console.log('拖动后的索引 :' + wIndex)// 遍历数组，将索引值赋值到对应的 sort_order上面，完成排序let arr = deList;let newArr = await arr.map((item, i) => {return {sort_order: i,field_code: item.field_code,};});const res = await this.$axios.post(`customer/save_order`, {list: newArr,});// console.log(res);const { error, message } = res.data;if (error == 0) {this.$message.success(message);}
},