转自：http://haoningabc.iteye.com/blog/1593640
dragsort官网地址：http://dragsort.codeplex.com/
html代码如下（需引入jquery和dragsort.js）：
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script> </head> <body> <table id="list1" border="1"> <thead id="gridThead"> <tr style="cursor: pointer;"> <td class="listHeadCell">编号</td> <td class="listHeadCell">名称</td> </tr> </thead> <tbody id="gridtbody"> <tr> <td name="biaozhi">1</td> <td>名称1</td> </tr> <tr> <td name="biaozhi">2</td> <td>名称2</td> </tr> <tr> <td name="biaozhi">3</td> <td>名称3</td> </tr> <tr> <td name="biaozhi">4</td> <td>名称4</td> </tr> </tbody> </table> <br/> <textarea name="listhaoSortOrder" id="listhaoSortOrder" rows=10 cols=100></textarea> <script type="text/javascript"> $(document).ready(function(){ $("#gridtbody").dragsort({ itemSelector: "tr", dragSelector: "tr", dragBetween: true,dragEnd: saveOrder1, placeHolderTemplate: "<tr></tr>" }); }); function saveOrder1() { // var data = $("#gridtbody").map(function() { return $(this).children().html(); }).get(); var data = $("[name='biaozhi']").map(function() { return $(this).html(); }).get(); $("#listhaoSortOrder").val(data.join("|")); }; </script> </body> </html>
代码运行效果截图：
