前端 实现表格内每行拖拽排序


工作上的需求:表格内的每一行数据需要通过拖拽实现重新排序的效果。

实现思路:通过原生table+draggable插件

 

先看看实现效果:
这是四条数据,拖拽前的排序如下:

 

拖拽过程如下,正在将第四条数据拖拽至第二行的位置:

最后实现的效果如下:

 

实现代码如下:

首先配置:options="{draggable:'.myline'}" 允许拖动的类为myline。

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

 

注意事项:像表头这些不允许拖动的多余行需要放在table的末尾,否则表头虽然没设置可拖拽的类,也允许被拖拽。

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM