vue.js + element UI实现表格、列表的拖动 推拽效果

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

在开发使用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 文档地址

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