vue和sortable.js实现表格拖拽

1、预先安装sortable.js：

npm install sortablejs --save

2、效果及代码：

<template>
  <div>
    <p id="msg"></p>
    <table id="itxst" width="80%" border="0" cellspacing="1" cellpadding="0" class="t1">
      <tr class="filter">
        <th>index</th>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
      </tr>
      <tr v-for="(item,index) in table_data" :key="index" :data-no="index">
        <td>{{index + 1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.address}}</td>
      </tr>
      <tfoot class="filter">
        <tr>
          <td colspan="4">
            <a-button @click="reset">刷新</a-button>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  data () {
    return {
      table_data: [
        {
          name: 'Edward King(0)',
          age: 30,
          address: 'London, Park Lane no. 0'
        }, {
          name: 'Edward King(1)',
          age: 30,
          address: 'London, Park Lane no. 0'
        }, {
          name: 'Edward King(2)',
          age: 31,
          address: 'London, Park Lane no. 0'
        }, {
          name: 'Edward King(3)',
          age: 32,
          address: 'London, Park Lane no. 0'
        }
      ]
    }
  },
  mounted () {
    this.drag()
  },
  methods: {
    drag () {
      var that = this
      // 获取对象
      var el = document.getElementById('itxst')
      // 设置配置
      var ops = {
        animation: 500,
        filter: '.filter',
        dataIdAttr: 'data-no',
        onEnd: function (evt) {
          console.log(evt)
          // 获取拖动后的排序
          var arr = sortable.toArray().splice(1, that.table_data.length)
          document.getElementById('msg').innerHTML = 'A组排序结果：' + arr
        }
      }
      // 初始化
      var sortable = Sortable.create(el, ops)
    },
    reset () {
    }
  }
}
</script>

<style scoped>
.t1{
  margin: auto;
}
.t1 tr{
  height: 50px;
  border-bottom: 1px solid gainsboro;
}
.t1 tr:first-child, .t1 tr:first-child:hover{
  background: #eeeeee;
}
.t1 tr:hover{
  background: #b9f9fc;
  border: 0;
  cursor: move;
}
</style>