vue+sortablejs来实现列表拖拽—

vue+sortablejs来实现列表拖拽——sortablejs的使用

sortablejs官网:https://sortablejs.com/

最近在看form-builder组件，发现里面有用到sortablejs插件，用于实现拖拽效果。
在这里插入图片描述
但是这个官网中的配置，实在是看不懂，太简单又太复杂，不实用。
下面记录一下我的使用：

实现效果

1.左侧可以拖拽到右侧
2.右侧不可以拖拽到左侧
3.左侧不可重复拖拽到右侧，且拖拽后左侧数据不变
4.上下拖拽后，数据自动排序

解决步骤1：安装`npm install sortablejs --save`

解决步骤2：在页面中局部引入

import Sortable from 'sortablejs';

解决步骤3：html部分代码

<div style="display: flex"><div id="table-names" style="flex: 1"><div class="tableItem" v-for="item of tableData" :key="item.id"><span>{{ item.id }}</span>=><span>{{ item.sort }}</span></div></div><div id="table-names2" style="flex: 1"><div class="tableItem" v-for="item of tableData2" :key="item.id"><span>{{ item.id }}</span>=><span>{{ item.sort }}</span></div></div>
</div>

在这里插入图片描述

解决步骤4：js部分代码

在mounted中添加以下代码：

let el = document.getElementById('table-names');
Sortable.create(el, {animation: 200,group: 'shared',chosenClass: 'chosenClass', // 被选中项的css 类名// dragClass: "dragClass",  // 正在被拖拽中的css类名onEnd: (evt) => {let { oldIndex, newIndex } = evt;this.switchMapOrder(oldIndex, newIndex);},
});
let el2 = document.getElementById('table-names2');
Sortable.create(el2, {animation: 200,chosenClass: 'chosenClass', // 被选中项的css 类名onEnd: (evt) => {let { oldIndex, newIndex } = evt;this.switchMapOrder2(oldIndex, newIndex);},
});

两个方法定义如下：

 switchMapOrder(oldIndex, newIndex) {console.log(`oldIndex: ${oldIndex}, newIndex: ${newIndex}`);const tableData = this.tableData;let resultData = []; // 结果数组// 先把被移动的那条数据单独取出来let beSpliceItem = tableData.splice(oldIndex, 1);if (this.tableData[oldIndex] && this.tableData[oldIndex].id) {let findIndex = this.tableData2.findIndex((item) => item.id == this.tableData[oldIndex].id);if (findIndex == -1) {this.tableData2.splice(newIndex, 0, this.tableData[oldIndex]);}}// 把剩下的数据复制给结果数组resultData = tableData;// 把被移动的那条数据赋值给结果数组resultData.splice(newIndex, 0, beSpliceItem[0]);// 遍历结果数组，让sort重新排序let newTableData = [];resultData.forEach((item, index) => {item.sort = index + 1;newTableData.push(item);});this.tableData = newTableData;console.log(222, this.tableData2, this.tableData2.length);},switchMapOrder2(oldIndex, newIndex) {console.log(`oldIndex: ${oldIndex}, newIndex: ${newIndex}`);const tableData = this.tableData2;let resultData = []; // 结果数组// 先把被移动的那条数据单独取出来let beSpliceItem = tableData.splice(oldIndex, 1);// 把剩下的数据复制给结果数组resultData = tableData;// 把被移动的那条数据赋值给结果数组resultData.splice(newIndex, 0, beSpliceItem[0]);// 遍历结果数组，让sort重新排序let newTableData = [];resultData.forEach((item, index) => {item.sort = index + 1;newTableData.push(item);});this.tableData2 = newTableData;console.log(this.tableData2);},