表格、列表的拖动、拖拽效果

在开发使用vue.js、elementUI开发项目时，客户提出将表格中的内容可随意拖动实现排序功能。
于是项目中采用sortablejs来实现该功能。

1.引入sortablejs

$ npm install sortablejs --save

2.组件中引入sortablejs

<script>
import Sortable from "sortablejs"

3.实现方法

methods: {
init() {
// 一定要等页面先加载完后才调用，否则会报错
this.$nextTick(() => {
this.initSort()
})
},
initSort() {
const el = document.querySelectorAll(
".table-list .el-table__body-wrapper > table > tbody"
)[0] // 获取拖拽的容器 .table-list 一定是table上的class 如果是其他上的class名称，可能会无法拖拽
this.sortable = Sortable.create(el, {
ghostClass: "sortable-ghost",
// handle: ".drag-item", // 指定推拽列
setData: function (dataTransfer) {
dataTransfer.setData("Text", "")
},
onEnd: evt => {
this.$nextTick(() => {
// 实现推拽的代码，先在原数组中删除当前推拽的对象，然后在将它添加到对应的位置
// targetObj当前推拽的对象，evt.oldIndex推拽对象原来的下标，evt.newIndex推拽对象要推拽到的下标
let targetObj = this.tables.splice(evt.oldIndex, 1)[0]
this.tables.splice(evt.newIndex, 0, targetObj)
})
}
})
}

4.

注意、注意、注意：如果你推拽不成功，或者顺序不正确，请查看<el-table>标签上是否指定了row-key属性。

<el-table :data=tables  class="table-list" row-key="id" ref="table" size='small' border>

5.如果你要使用

handle: ".drag-item",

className="drag-item"

<el-table :data=tables  class="table-list" row-key="id" ref="table" size='small' border><el-table-column className="drag-item" width="50" align="center" label="拖拽">
<template slot-scope="scope">
<i class="icon icon-drag"></i>
</template>
</el-table-column>

最后附上 sortablejs 文档地址

如果本文对你有帮助，请大佬打赏，谢谢