Vue.Draggable、el-table实现表格拖拽

​
GitHub地址链接：https://github.com/SortableJS/Vue.Draggable
中文网址：https://www.itxst.com/vue-draggable/fiamvqam.html

注意：el-table 一定要指定 row-key！！！不然拖拽会出现问题。

install

yarn add vuedraggable

npm i -S vuedraggable

引入

import Sortable from "sortablejs";

<el-table class="draggable-table" :data="tableData" row-key="id" ></el-table>

 // 表格行拖拽
 rowDrag() {
     const el = document.querySelectorAll(".draggable-table .el-table__body-wrapper > table > tbody")[0];
     const vm = this;

     Sortable.create(el, {
           disabled: false, // 拖拽是否可用
           ghostClass: 'sortable-ghost', //拖拽样式
           animation: 150, // 拖拽延时
           onEnd: function (e) { // 拖拽结束时触发
               let arr = vm.tableData;
               arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]);   // 数据处理，获取最新的表格数据
               vm.$nextTick(function () {
                   vm.tableData = arr;
               })
           },
       });
   },

如果不想使用Element-ui，可以到中文文档去看看例子。
中文网址：https://www.itxst.com/vue-draggable/fiamvqam.html

中文文档的例子如下：

<template>
  <div style="padding:10px"> 
    <!--使用draggable组件--> 
     <div>点击第一列数字进行拖动，其他列拖拽无效</div>
     <table class="itxst">
       <draggable v-model="list" animation="500"  force-fallback="true"  handle=".move"  @start="onStart" @end="onEnd" :move="checkMove"> 
       <tr   v-for="item in list" :key="item.id"  >
          <td style="width:50px" class="move">{{item.id}}</td>
          <td style="width:250px">{{item.name}}</td>
       </tr>
       </draggable> 
      </table> 
  </div>
</template>
<style scoped>
/*定义要拖拽元素的样式*/
table.itxst {
color:#333333;
border: #ddd solid 1px;
border-collapse: collapse;
}
table.itxst th {
border: #ddd solid 1px;
padding: 8px; 
background-color: #dedede;
}
table.itxst td {
border: #ddd solid 1px;
padding: 8px; 
background-color: #ffffff;
}
table.itxst tr {
 cursor: pointer;
}
table.itxst td.move:hover {
 cursor: move;
} 
</style>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return { 
      drag:false,
      //定义要被拖拽对象的数组
      list:[
        {id:1,name:'www.itxst.com'},
        {id:2,name:'www.jd.com'},
        {id:3,name:'www.ebay.com'},
        ] 
    };
  },
  methods: {
     checkMove(evt) {
        console.log(evt)
        return true;
    },
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>

​