使用Element UI Table+Vue實現表格的拖拽。在GitHub上搜索了下發現Sortable這款插件挺不錯的，Star14000+，而且還支持Vue等多種主流的前端框架，可謂是十分的強大。最重要的原因是，完全不依賴JQ。
Vue.Draggable，Vue版本的Sortable。拖拽后能夠使數據模型同步，完美兼容Vue的數據視圖雙向綁定。
下面貼一下官方demo
看得出來真的很強大。數據實時的響應同步，結合Vue我們根本不需要對數據進行復雜的邏輯處理。
准備
安裝依賴
npm i -S vuedraggable
vuedraggable依賴 Sortable.js，所以下載了vuedraggable，我們便可以直接引入Sortable使用Sortable的特性。
vuedraggable是Sortable一種加強，實現組件化的思想，可以結合Vue，使用起來更方便。
Sortable使用
在這里我們還是使用一句Sortable的構建方式
import Sortable from 'sortablejs';
導入Sortable類，創建拖拽函數
drag() { const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]; Sortable.create(el, { disabled: !this.enableDrag, ghostClass: 'sortable-ghost', setData: function(dataTransfer) { dataTransfer.setData('Text', ''); }, onEnd: (evt) => { } }); },
我們在數據加載完成之后，就調用drag()方法來開啟拖拽功能。
介紹下幾個參數的作用：
el 代表我們要偵聽拖拽響應的dom對象
disabled 是否開啟拖拽
ghostClass 拖拽時可以給加上樣式
setData 回調HTML5 DragEvent的dataTransfer`對象，來設置顯示的數據
onEnd 結束拖拽后的回調函數，evt包含oldIndex，newIndex等一系列屬性。
完整屬性列表
演示
————————————————
版權聲明：本文為CSDN博主「唯一昵稱真難」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_26440803/article/details/83663511