1.添加上下面在線鏈接代碼

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

添加JS函數(shù)代碼

  <script>

    $(document).ready(function() {

        var fixHelperModified = function(e, tr) {

                //children() 方法返回返回被選元素的所有直接子元素

                var $originals = tr.children();

                //clone() 方法生成被選元素的副本，包含子節(jié)點、文本和屬性

                var $helper = tr.clone();

                //each() 方法規(guī)定為每個匹配元素規(guī)定運行的函數(shù)

                $helper.children().each(function(index) {

                    //width() 方法返回或設(shè)置匹配元素的寬度

                    //eq() 方法將匹配元素集縮減值指定 index 上的一個

                    $(this).width($originals.eq(index).width())

                });

                return $helper;

            },

            updateIndex = function(e, ui) {

                //ui.item - 表示當前拖拽的元素

                //parent() 獲得當前匹配元素集合中每個元素的父元素，使用選擇器進行篩選是可選的

                $('td.index', ui.item.parent()).each(function(i) {

                    //html() 方法返回或設(shè)置被選元素的內(nèi)容 (inner HTML)

                    $(this).html(i + 1);

                });

            };

        $("#sort tbody").sortable({

            //設(shè)置是否在拖拽元素時，顯示一個輔助的元素。可選值：'original', 'clone'

            helper: fixHelperModified,

            //當排序動作結(jié)束時觸發(fā)此事件。

            stop: updateIndex

        }).disableselection();

    });

    </script>

2.將table的id 改為sort,與上面定義的一致便可,隨意更改

<table  id="sort" >

<tr height="20px" >

加上class="index",序號會隨著行拖拽后而重新排序

<td colspan="1"><span ><%=no_i%></span></td>

</tr>

</table>

即可實現(xiàn)效果