如下代码：

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 排序(Sortable) - 默认功能</title> <link rel="stylesheet" href="../csscool/css/jquery-ui.min.css"> <script src="../csscool/js/jquery.min.js"></script> <script src="../csscool/js/jquery-ui.min.js"></script>

<style> #sortable1 { list-style-type: none; margin: 0; padding: 0; width: 40%;float: left; } #sortable1 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable1 li span { position: absolute; margin-left: -1.3em; }

#sortable2 { list-style-type: none; margin: 0; padding: 0; width: 40%; float: left; } #sortable2 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable2 li span { position: absolute; margin-left: -1.3em; } #tablesort{width: 500px;}

#tablesort tr{background: #ccc;} #tablesort td{width: 20%;} </style> <script> $(function() { $( "#sortable tbody" ).sortable(); $( "#sortable tbody" ).disableSelection(); $( "#sortable1" ).sortable(); $( "#sortable1" ).disableSelection(); $( "#sortable2" ).sortable(); $( "#sortable2" ).disableSelection(); }); </script> </head> <body> <form action="">

<ul id="sortable1"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> <ul id="sortable2"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> <div id="tablesort"> <table class="table table-striped table-bordered table-hover" id="sortable"> <thead> <tr> <th style="text-align: center;">序号</th> <th style="text-align: center;">名称</th> <th style="text-align: center;">类型代码</th> <th style="text-align: center;">含义</th> <th style="text-align: center;">是否显示</th> <th style="text-align: center;">操作</th> </tr> </thead> <tbody>

<tr class="item" aid="1" id="1" sort="1">
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>显示</td>
        <td><button class="btn btn-primary edit" tid="1">修改</button></td>
    </tr>

<tr class="item" aid="2" id="2" sort="2"> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>显示</td> <td><button class="btn btn-primary edit" tid="2">修改</button></td> </tr> <tr class="item" aid="3" id="3" sort="3"> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>显示</td> <td><button class="btn btn-primary edit" tid="3">修改</button></td> </tr> </tbody> </table> </div> </form>

</body> </html>

需要注意的问题： 1、文件的调用
<link rel="stylesheet" href="../csscool/css/jquery-ui.min.css"> <script src="../csscool/js/jquery.min.js"></script> <script src="../csscool/js/jquery-ui.min.js"></script> 2、对DOM元素的操作： $( "#sortable tbody" ).sortable(); $( "#sortable tbody" ).disableSelection();