jQuery实现table 列-拖曳排序

今天因项目需要，table 列-拖曳排序，在巨人的肩膀上，自己做了个小小的demo，与众分享。如图所示，目的是能将所有列随意排序。

后台代码 就是为了传送数据到前台展示。

    @RequestMapping(value = "/propertiesSort", method = RequestMethod.GET)
    public String propertiesSort(String operationId, Model model) {

      Operation operation = this.get(Operation.class, operationId);
        // 根据业务id 获取待填写字段
      String sql = "select * from iss_properties where operation_id='" + operationId + "' order by col_order asc";
        List<Properties> propertiesList = this.findBySql(sql, Properties.class);
        model.addAttribute("propertiesList", propertiesList);
        model.addAttribute("operation",operation);
        return "issue/propertiesSort_list";
    }

前台代码，利用freemarker 渲染页面。

<style>
    .no-select-text {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }

    #headTable td {
        border-bottom: 0px;
        cursor: all-scroll;
    }

    #mainTable td {
        border-top: 0px;
    }

    #info {
        background: #eee;
        border: 1px solid #eee;
        width: 100px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }

    .arrow {
        width: 10px;
        height: 10px;
        position: relative;
        /*display: inline-block;*/
        /*margin: 10px 10px;*/
    }

    .arrow:before, .arrow:after {
        content: '';
        border-color: transparent;
        border-style: solid;
        position: absolute;
    }

    .arrow-up:before {
        border: none;
        background-color: red;
        height: 50%;
        width: 30%;
        top: 50%;
        left: 35%;
    }

    .arrow-up:after {
        left: 0;
        top: -50%;
        border-width: 5px 5px;
        border-bottom-color: red;
    }

    .arrow-down:before {
        border: none;
        background-color: red;
        height: 50%;
        width: 30%;
        top: 0;
        left: 35%;
    }

    .arrow-down:after {
        left: 0;
        top: 50%;
        border-width: 5px 5px;
        border-top-color: red;
    }

    #triangle {
        display: none;
        position: absolute;
        top: 0px;
        left: 4px;
    }
</style>


<!-- Main content -->
<#if (operation??) && (operation?size>0)>
    <h2 style="text-align: center;">${operation.subject}</h2>
</#if>
<div id="main" style="margin-left: 20%">
// 使用freemarker渲染html页面
    <table id="headTable" border="1" cellpadding="0" cellspacing="0" style="text-align:center;">
        <tr style="background-color: #E5E5E5;" id="tb">
            <#if (propertiesList??) && (propertiesList?size>0)>
                <#assign i=-1/>
                <#list propertiesList as pInfo>
                    <#assign i=i+1/>
                    <td style="width: 100px">${pInfo.chName}</td>
                </#list>
            </#if>
        </tr>
    </table>
    <table id="mainTable" border="1" cellpadding="0" cellspacing="0" style="text-align:center;">
        <tr>
            <#if (propertiesList??) && (propertiesList?size>0)>
                <#assign i=-1/>
                <#list propertiesList as pInfo>
                    <#assign i=i+1/>
                    <td style="width: 100px">暂无数据</td>
                </#list>
            </#if>
        </tr>
        <tr>
            <#if (propertiesList??) && (propertiesList?size>0)>
                <#assign i=-1/>
                <#list propertiesList as pInfo>
                    <#assign i=i+1/>
                    <td style="width: 100px">暂无数据</td>
                </#list>
            </#if>
        </tr>
        <tr>
            <#if (propertiesList??) && (propertiesList?size>0)>
                <#assign i=-1/>
                <#list propertiesList as pInfo>
                    <#assign i=i+1/>
                    <td style="width: 100px">暂无数据</td>
                </#list>
            </#if>
        </tr>
    </table>
    <div id="info">

    </div>
    <div id="triangle">
        <div class="arrow arrow-down"></div>

        <div class="arrow arrow-up"></div>
    </div>
    <div class="row">

        <#if (operation??) && (operation?size>0)>
            <h4 class="col-sm-6"><span>注：</span>${operation.remark}</h4>
        </#if>
    </div>

    <div class="col-xs-4">
        <button type="button" class="btn btn-default" data-btn-type="cancel" data-dismiss="modal" onclick="change()">
            &nbsp;&nbsp;关闭&nbsp;&nbsp;</button>
    </div>
</div>

<script src="${basePath}/resources/adminlte/plugins/jQuery/jQuery-2.2.0.js"></script>

<script>
    $(function () {

        var h = $('#headTable td').height();
        $('.arrow-up').css({
            'margin-top': h
        });

        var flag = false;
        $('#headTable td').unbind("mousedown");
        $('#headTable td').mousedown(function () {
            var startIndex = $(this).index();  //某一列起始位置
            var endIndex;
            flag = true;
            $('#info').css({
                display: 'block'
            });
            //$('#triangle').css('display', 'block');
            $('body').addClass('no-select-text');

            $('#info').html($(this).html());
            $(document).mousemove(function (e) {
                //用户把鼠标移动一个像素，就会发生一次 mousemove 事件。
                //处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。
                if (flag) {
                    var e = e || window.event;
                    var x = e.clientX + 5 + 'px';
                    var y = e.clientY + 5 + 'px';

                    $('#info').css({
                        left: x,
                        top: y
                    });
                    if (e.preventDefault) {
                    //该方法将通知 Web 浏览器不要执行与事件关联的默认动作
                        e.preventDefault();

                    }
                    return false;
                }

            });

            $('table td').mouseenter(function () {

                endIndex = $(this).index();
                if (endIndex == startIndex) {
                    $('#triangle').css('display', 'none');
                } else {
                    $('#triangle').css('display', 'block');
                }
                var offsetW = 0;
                var preTd = $(this).prevAll();

                $.each(preTd, function (id, item) {
                    offsetW += item.offsetWidth;
                })
                if (endIndex > startIndex) {
                    offsetW += $(this)["0"].offsetWidth;
                }
                $('#triangle').css({
                    'top': 0,
                    'left': offsetW + 5
                });
            });
            $(document).mouseup(function () {
            //当松开鼠标按钮时，将改变
                flag = false;
                $('#triangle').css('display', 'none');
                $('#info').css({
                    display: 'none'
                });
                if (endIndex < startIndex) {
                    $("#mainTable tr").each(function (i) {
                        $('#mainTable tr:eq(' + i + ') td:eq(' + endIndex + ')').before($('#mainTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
                        $('#mainTable tr:eq(' + i + ') td:eq(' + (startIndex + 1) + ')').remove();
                        $('#headTable tr:eq(' + i + ') td:eq(' + endIndex + ')').before($('#headTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
                        $('#headTable tr:eq(' + i + ') td:eq(' + (startIndex + 1) + ')').remove();
                    });

                } else if (endIndex > startIndex) {
                    $("#mainTable tr").each(function (i) {
                        $('#mainTable tr:eq(' + i + ') td:eq(' + endIndex + ')').after($('#mainTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
                        $('#mainTable tr:eq(' + i + ') td:eq(' + (startIndex) + ')').remove();
                        $('#headTable tr:eq(' + i + ') td:eq(' + endIndex + ')').after($('#headTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
                        $('#headTable tr:eq(' + i + ') td:eq(' + (startIndex) + ')').remove();
                    });

                }
                $(document).unbind("mousemove");
                $(document).unbind("mouseup");
                $('table td').unbind("mouseenter");
            });

        });
    })

    // 该方法将最终所排字段顺序，作为字符串传入后台，将顺序作为值存入数据库即可
    function change() {
        var tb = document.getElementById("tb");
        var params = "";
        for (var j = 0; j < tb.cells.length; j++) {//取得第几行下面的td个数，再次循环遍历该行下面的td元素

            var cell = tb.cells[j];//获取某行下面的某个td元素

            //cell.innerHTML获取元素里头的值
            params += cell.innerHTML + ",";
        }

        ajaxPost(basePath + '/issue/saveProOrder', {"params": params}, function (data, status) {
            //  刷新之类，自己写。
        });
    }

</script>

欢迎评论更改指正！