工作上的需求:表格內的每一行數據需要通過拖拽實現重新排序的效果。
實現思路:通過原生table+draggable插件
先看看實現效果:
這是四條數據,拖拽前的排序如下:

拖拽過程如下,正在將第四條數據拖拽至第二行的位置:
最后實現的效果如下:
實現代碼如下:
首先配置:options="{draggable:'.myline'}" 允許拖動的類為myline。
接着設置允許拖拽的設置 @start="drag=true" @end="drag=false"即可。
注意事項:像表頭這些不允許拖動的多余行需要放在table的末尾,否則表頭雖然沒設置可拖拽的類,也允許被拖拽。