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函数代码

  <script>

    $(document).ready(function() {

        var fixHelperModified = function(e, tr) {

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

                var $originals = tr.children();

                //clone() 方法生成被选元素的副本，包含子节点、文本和属性

                var $helper = tr.clone();

                //each() 方法规定为每个匹配元素规定运行的函数

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

                    //width() 方法返回或设置匹配元素的宽度

                    //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() 方法返回或设置被选元素的内容 (inner HTML)

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

                });

            };

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

            //设置是否在拖拽元素时，显示一个辅助的元素。可选值：'original', 'clone'

            helper: fixHelperModified,

            //当排序动作结束时触发此事件。

            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>

即可实现效果