排序插件jquery.ui.sortable

<link href="${base}/resources/sort/jquery.ui.all.css" rel="stylesheet"
    type="text/css" />
<script type="text/javascript" src="${base}/page/js/jquery.js"></script>
<script type="text/javascript"
    src="${base}/resources/sort/jquery.ui.core.js"></script>
<script type="text/javascript"
    src="${base}/resources/sort/jquery.ui.widget.js"></script>
<script type="text/javascript"
    src="${base}/resources/sort/jquery.ui.mouse.js"></script>
<script type="text/javascript"
    src="${base}/resources/sort/jquery.ui.sortable.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        //是否开启排序
        var isSort=false;
        //#sortTable为需要排序的表格
        $("#sortTable tbody").sortable({
            //helper对象为sortable方法返回的对象
            helper:function(e,ele){
                //获得子对象
                var _origianl=ele.children();
                //克隆对象
                var _helper=ele.clone();
                _helper.children().each(function(index){
                    //根据不同的下标设置宽度
                    $(this).width(_origianl.eq(index).width());
                });
                //改变选中的背景色
                _helper.css("background","#eef")
                return _helper;
            },
            //更新时设置序号
            update:function(e,u){
                setOrders();
            },
            //拖动方向
            axis:"y"
        });
        //初始化时禁用排序功能
        $("#sortTable tbody").sortable("disable");
        //点击排序后
        $("#order").click(function(){
            if(!isSort){
                //追加一列
                $("#sortTable thead tr").append("<th>序号</th>");
                //设置排序
                setOrders();
                //改变文字
                $("#order").html("<span><img src=‘${base}/page/images/t04.png‘ />"+"</span>保存排序");
                //启用排序
                $("#sortTable tbody").sortable("enable");
                //更改状态
                isSort=true;
            }else{
                //获得排序后的需要[需要给tr一个id="id_${c.id}"属性]
                var ids=$("#sortTable tbody").sortable("serialize",{key:"ids"});
                //发请求保存排序后的表格
                $.post("http://localhost:8080/Yuxinglab/admin/channel/updateSort.jhtml?"+ids,function(data){
                    if(data.result){
                        $("#order").html("<span><img src=‘${base}/page/images/t04.png‘ />"+"</span>开始排序");
                        $("#sortTable tbody").sortable("disable");
                        $("#sortTable tr").each(function(){
                            $(this).children().last().remove();
                        });
                        isSort=false;
                        alert("排序保存成功");
                    }else{
                        alert(data.msg)
                    }
                    
                });
                
                
            }
            
        });
        
        
        
        function setOrders(){
            $("#sortTable tbody tr").each(function(index){
                if(isSort){
                    $(this).find("td:last").html((index+1));
                }else{
                    $(this).append("<td>"+(index+1)+"</td>");
                }
                
            });
        }
        $(".click").click(function() {
            $(".tip").fadeIn(200);
        });

        $(".tiptop a").click(function() {
            $(".tip").fadeOut(200);
        });

        $(".sure").click(function() {
            $(".tip").fadeOut(100);
        });

        $(".cancel").click(function() {
            $(".tip").fadeOut(100);
        });

    });
</script>