实现Bootstrap表格拖拽：
需要引入jquery.min.js、bootstrap相关文件,以及jquery.dragsort-0.5.2.js
代码如下：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.5.2.js"></script> <style>
#field_list_table tr, th, td {
text-align: center;
height: 4.5em;
}
#field_list_table {
margin-bottom: 0px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="table table-striped table-bordered table-hover"
id="field_list_table">
<thead id="gridThead">
<tr style="cursor: pointer;">
<td class="listHeadCell">编号</td>
<td class="listHeadCell">名称</td>
</tr>
</thead>
<tbody id="gridtbody">
<tr>
<td></td>
<td>名称1</td>
</tr>
<tr>
<td></td>
<td>名称2</td>
</tr>
<tr>
<td></td>
<td>名称3</td>
</tr>
<tr>
<td ></td>
<td>名称4</td>
</tr>
</tbody>
</table>
<script>
$(function () {
// 刚开始的时候给每个tr一个序号，用于初始化,由于都是后台脚本通过模版引擎遍历输出，此处不多点缀。
var len = $('#field_list_table tr').length;
for (var i = 1; i < len; i++) {
$('#field_list_table tr:eq(' + i + ') td:first').html("<span class='badge'>" + i + "</span>");
$('#field_list_table tr:eq(' + i + ') td:nth-child(2)').html("i am number " + i + "！");
}
//拖拽排序
$("#gridtbody").dragsort({
itemSelector: "tr",
dragSelector: "tr",
dragBetween: false,
//dragEnd: saveOrder1(),//拖拽完成后调用方法
placeHolderTemplate: "<tr><td></td></tr>"
});
});
</script>
</body>
</html>