jQuery实现表格拖动排序

原理就是利用mousedown、mouseover、mouseup事件实现拖动，并用Ajax实现保存结果。

JS代码如下：

<!--题目调序功能-->
<script type="text/javascript">
    var moveStart = false; //是否开始移动
    var curTr; //待移动的tr
    var tarTr; //目标tr

    _run(function () {
        //鼠标按下
        $("#tableDataList").find("tr").find("td:not(:last)").mousedown(function () {
            moveStart = true;
            curTr = $(this).parent();
            curTr.find("td").addClass("highlightTd");
            curTr.addClass("pointer");
        });

        //鼠标移入
        $("#tableDataList").find("tr").mouseover(function () {
            var ch = "input[type='checkbox']";
            if (moveStart == true && curTr.find(ch).attr("subid") != $(this).find(ch).attr("subid")) {
                if (curTr.offset().top > $(this).offset().top) { //上移
                    tarTr = $(this);
                    tarTr.focus();
                    tarTr.before(curTr);
                }
                else { //下移
                    tarTr = $(this);
                    tarTr.focus();
                    tarTr.after(curTr);
                }
            }
        });

        //鼠标移出
        $("#tableDataList").find("tr").mouseup(function () {
            if (moveStart == true) {
                moveStart = false;
                curTr.find("td").removeClass("highlightTd");
                curTr.removeClass("pointer");

                var subjectIds = ""; //存储ID集合
                $("#tableDataList").find("input[type='checkbox'][id!='checkAll']").each(function () {
                    subjectIds += $(this).attr("subId") + ",";
                });
                if (subjectIds != "") {
                    //Ajax请求保存数据
                    $.ajax({
                        type: "POST",
                        url: "#{ChangeSubjectsSortUrl}",
                        data: "subjectIds=" + subjectIds.substr(0, subjectIds.length - 1), //传参
                        success: function (data) {
                            if (data == "ok") {
                                var i = 0;
                                $("#tableDataList").find("tr:not(:first)").each(function () {
                                    i++;
                                    $(this).find("td:eq(3)").html(i); //更新题目序号显示
                                });
                            }
                        }
                    });
                }
            }
        });
    });
</script>

View Code