实现Bootstrap表格拖拽：
需要引入jquery.min.js、bootstrap相关文件,以及jquery.dragsort-0.5.2.js
代码如下：
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 5 <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css"> 6 <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.js"></script> 7 <script type="text/javascript" src="jquery.dragsort-0.5.2.js"></script> 8 9 <style> 10 #field_list_table tr, th, td { 11 text-align: center; 12 height: 4.5em; 13 } 14 #field_list_table { 15 margin-bottom: 0px; 16 border-collapse: collapse; 17 } 18 </style> 19 </head> 20 <body> 21 <table class="table table-striped table-bordered table-hover" 22 id="field_list_table"> 23 <thead id="gridThead"> 24 <tr style="cursor: pointer;"> 25 <td class="listHeadCell">编号</td> 26 <td class="listHeadCell">名称</td> 27 </tr> 28 </thead> 29 <tbody id="gridtbody"> 30 <tr> 31 <td></td> 32 <td>名称1</td> 33 </tr> 34 <tr> 35 <td></td> 36 <td>名称2</td> 37 </tr> 38 <tr> 39 <td></td> 40 <td>名称3</td> 41 </tr> 42 <tr> 43 <td ></td> 44 <td>名称4</td> 45 </tr> 46 </tbody> 47 </table> 48 <script> 49 $(function () { 50 // 刚开始的时候给每个tr一个序号，用于初始化,由于都是后台脚本通过模版引擎遍历输出，此处不多点缀。 51 var len = $('#field_list_table tr').length; 52 for (var i = 1; i < len; i++) { 53 $('#field_list_table tr:eq(' + i + ') td:first').html("<span class='badge'>" + i + "</span>"); 54 $('#field_list_table tr:eq(' + i + ') td:nth-child(2)').html("i am number " + i + "！"); 55 } 56 //拖拽排序 57 $("#gridtbody").dragsort({ 58 itemSelector: "tr", 59 dragSelector: "tr", 60 dragBetween: false, 61 //dragEnd: saveOrder1(),//拖拽完成后调用方法 62 placeHolderTemplate: "<tr><td></td></tr>" 63 }); 64 }); 65 </script> 66 </body> 67 </html>