vue+element拖动排序功能
使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.
教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741
教程地址:https://blog.csdn.net/zhaoxiang66/article/details/81003094
安装npm install vuedraggable -S(可能需要安装Sortable)
引用import draggable from ‘vuedraggable’
注册组件components: { draggable },
通过draggable标签来使用
调用update方法,此方法事件对象返回新索引和旧索引,同样数据是响应式的.
template代码:
<draggable v-model="codeList" @update="datadragEnd" :options="{animation:200}">
2 <div class="drag-item" v-for="(item,i) in codeList" :key="i">
3 <el-row>
4 <el-col class="line" :span="6"> {{item.field_title}}</el-col>
5 <el-col class="line" :span="8">
6 <el-switch
7 v-model="item.is_show"
8 active-color="#13ce66"
9 @change="lockChange(item)"
10 :active-value="1"
11 :inactive-value="0"
12 ></el-switch>
13 </el-col>
14 <el-col :span="8">
15 <el-button type="text" size="mini" @click="showEditCode(item)">编辑</el-button>
16 <el-button
17 v-if="item.is_system != 1"
18 type="text"
19 size="mini"
20 @click="deleCode(item)"
21 >删除</el-button>
22 </el-col>
23 </el-row>
24 </div>
25 </draggable>
methods代码:
1 async datadragEnd(evt) {
2 evt.preventDefault();
3 // console.log('拖动前的索引 :' + evt.oldIndex)
4 // console.log('拖动后的索引 :' + evt.newIndex)
5 // 遍历数组,将索引值赋值到对应的sort_order上面,完成排序
6 let arr = this.codeList;
7 let newArr = await arr.map((item, i) => {
8 return {
9 sort_order: i,
10 field_code: item.field_code
11 };
12 });
13 const res = await this.$axios.post(`customer/save_order`, {
14 list: newArr
15 });
16 // console.log(res)
17 const { error, message } = res.data;
18 if (error == 0) {
19 this.$message.success(message);
20 }
21 },
QQ:826344123 前端交流