<!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(1) }, onReorderRowsDrop: function (table, row) { console.log(2) }, onReorderRow: function (newData) { console.log(3) } }); }); </script> </head> <body> <h2>Drag the table--Neven.Jr Production</h2> <table class="bordered" id="tableId"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> <th>Action</th> </tr> </thead> <tr> <td>1</td> <td>The Shawshank Redemption</td> <td>1994</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>2</td> <td>The Godfather</td> <td>1972</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>3</td> <td>The Godfather: Part II</td> <td>1974</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>4</td> <td>The Good, the Bad and the Ugly</td> <td>1966</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>5</td> <td>Pulp Fiction</td> <td>1994</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>6</td> <td>12 Angry Men</td> <td>1957</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>7</td> <td>Schindler's List</td> <td>1993</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>8</td> <td>One Flew Over the Cuckoo's Nest</td> <td>1975</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>9</td> <td>The Dark Knight</td> <td>2008</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>10</td> <td>The Lord of the Rings: The Return of the King</td> <td>2003</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.rarjavascript
或者使用sorttable插件： http://jqueryui.com/sortable/css