Vue.Draggable+Element-ui Table实现拖拽

Vue.Draggable

GitHub地址：https://github.com/SortableJS/Vue.Draggable

Live Demos：https://sortablejs.github.io/Vue.Draggable/

Live Demos：https://david-desmaisons.github.io/draggable-example/

Install

yarn add vuedraggable

npm i -S vuedraggable

在需要实现拖拽功能的页面中直接引入

import Sortable from 'sortablejs'

<script>
	  // 拖动
      drag () {
        // 首先获取需要拖拽的dom节点
        const el1 = document.querySelectorAll('.edit-form-item .el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0];
        Sortable.create(el1, {
          disabled: false, // 是否开启拖拽
          ghostClass: 'sortable-ghost', //拖拽样式
          animation: 150, // 拖拽延时，效果更好看
          group: { // 是否开启跨表拖拽
            pull: false,
            put: false
          },
          onEnd: (e) => { // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
            let arr = this.Data; // 获取表数据
            arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
            this.$nextTick(function () {
              this.Data= arr; 
            });
          }
        });
      }
</script>
<style lang="less" type="text/less">
	.sortable-ghost {
      opacity: 0.4;
      background-color: #F4E2C9;
    }
</style>

重要（坑）：

在element-ui table 一定要指定row-key 属性！，否则拖拽排序会出问题。

不在element-ui中使用区别如下：

在使用的页面中引入

import Draggable from 'vuedraggable'

然后在components中注册组件

components: {
    Draggable
  }

在template模板中使用

<draggable v-model="tableData">
  <div v-for="item in tableData" :key="item.id" class="item">
    {{item.name}}
  </div>
</draggable>

js方法跟上面一致
大功告成