正文
table行拖拽
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table拖拽</title> <!--插件：bootstrap-table http://bootstrap-table.wenzhixin.net.cn/ -->
<!--bootstrap-table扩展bootstrap-table-reorder-rows https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/reorder-rows -->
<!--插件：jquery.tablednd.js -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablednd.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
<script type="text/javascript">
$(function () {
$("#tableId").bootstrapTable({
reorderableRows: true,
onReorderRowsDrag: function (table, row) {
console.log()
},
onReorderRowsDrop: function (table, row) {
console.log()
},
onReorderRow: function (newData) {
console.log()
}
}); });
</script>
</head>
<body>
<h2>Drag the table--Neven.Jr Production</h2>
<table class="bordered" id="tableId">
<thead> <tr>
<th>#</th>
<th>IMDB Top Movies</th>
<th>Year</th>
<th>Action</th>
</tr>
</thead>
<tr>
<td></td>
<td>The Shawshank Redemption</td> <td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>The Godfather</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr> <td></td>
<td>The Godfather: Part II</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>The Good, the Bad and the Ugly</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>Pulp Fiction</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td> Angry Men</td> <td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>Schindler's List</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr> <td></td>
<td>One Flew Over the Cuckoo's Nest</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>The Dark Knight</td> <td></td>
<td>
<a href="javascript:void(0);">Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr class="nodrop nodrag">
<td></td>
<td>The Lord of the Rings: The Return of the King</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr> </table>
<br>
</body>
</html>
https://files.cnblogs.com/files/xuguanghui/table%E8%A1%8C%E6%8B%96%E6%8B%BD.rar
或者使用sorttable插件： http://jqueryui.com/sortable/
