前端 實現表格內每行拖拽排序


工作上的需求:表格內的每一行數據需要通過拖拽實現重新排序的效果。

實現思路:通過原生table+draggable插件

 

先看看實現效果:
這是四條數據,拖拽前的排序如下:

 

拖拽過程如下,正在將第四條數據拖拽至第二行的位置:

最后實現的效果如下:

 

實現代碼如下:

首先配置:options="{draggable:'.myline'}" 允許拖動的類為myline。

接着設置允許拖拽的設置 @start="drag=true" @end="drag=false"即可。

 

注意事項:像表頭這些不允許拖動的多余行需要放在table的末尾,否則表頭雖然沒設置可拖拽的類,也允許被拖拽。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM