实现Bootstrap表格拖拽
实现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 >
23 <thead >
24 <tr >
25 <td class="listHeadCell">编号</td>
26 <td class="listHeadCell">名称</td>
27 </tr>
28 </thead>
29 <tbody >
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>- 上一篇 »java实现鼠标拖拽动作监听
- 下一篇 »JavaScript鼠标拖拽特效及相关问题总结