sortable.js 功能强大的JavaScript 拖拽库 

特性

1，支持多种框架（angular、vue、react等）              4，简单的API，方便使用

2，支持所有的css框架,                                                5，不依赖Jquery等其他框架

3，支持触屏设备和大部分浏览器                                 6，基于原生HTML5中的拖放API

安装

npm install sortablejs --save

下面用一个简单的表格实例实现一个行和列拖拽的功能

<el-table :data="data">
    <el-table-column label="吃饭" prop="a"></el-table-column>
    <el-table-column label="睡觉" prop="b"></el-table-column>
    <el-table-column label="打豆豆" prop="c"></el-table-column>
</el-table>
import Sortable from 'sortablejs'
export default({
    data(){
     return{
       data:[
        {
          id:"1",
          a:'测试',
          b:"哈哈",
          c:"嗯嗯"
        },{
          id:"2",
          a:"测试2",
          b:"嘿嘿",
          c:"看看"
        }
      ]
    }
  }
})

用法

mounted() {
    this.rowDrop()
    this.columnDrop()
},
methods: {
    //行拖拽
    rowDrop() {
      const table = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(table, { //记得引入sortable
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽
    columnDrop() {
      const tr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(tr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
   }
}