这篇文章主要介绍了jquery如何实现表格行拖动排序，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体内容如下

引入JS

<scriptsrc="jquery.min.js"></script><scriptsrc="jquery-ui.min.js"></script>

html代码

<!doctypehtml><html><head><metacharset="UTF-8"><title>sortDemo</title><scriptsrc="jquery.min.js"></script><scriptsrc="jquery-ui.min.js"></script></head><body><tableid="dataTable"border="1"cellpadding="6"cellspacing="0"align="center"><thead><tr><th>序号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>18</td></tr><tr><td>2</td><td>李四</td><td>25</td></tr><tr><td>3</td><td>王五</td><td>16</td></tr><tr><td>4</td><td>赵六</td><td>30</td></tr><tr><td>5</td><td>田七</td><td>20</td></tr></tbody></table><scripttype="text/javascript">$(function(){varfixHelper=function(e,ui){ui.children().each(function(){$(this).width($(this).width());});returnui;};$("#dataTabletbody").sortable({cursor:"move",helper:fixHelper,axis:"y",start:function(e,ui){ui.helper.css({"background":"#fff"});returnui;}});$("#sortable").disableSelection();});</script></body></html>

效果

感谢你能够认真阅读完这篇文章，希望小编分享的“jquery如何实现表格行拖动排序”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!