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>

HTML代码如下（说明：框架会自动把<!-- BEGIN list -->和<!-- END list -->之间的内容绑定为列表）：

<div class="Activity_Select_Index_Con">
    <b class="Activity_Select_Index_Title">题目 <a href="#{viewAllLink}" title="预览所有题目"
        class="frmBox">
        <img src="~img/edit.gif" />预览问卷</a> <a href="#{addLink}" title="添加题目" class="frmLink"
            loadto="divEdit" nolayout="999">
            <img src="~img/add.gif" />添加</a> <a href="javascript:void(0);" onclick="batchDeleteClick()">
                <img src="~img/delete.gif" />
                删除</a></b>
    <div class="SIMPO_Table" style=" 100%">
        <table id="tableDataList" border="0" cellspacing="0" cellpadding="0" style="-moz-user-select: none;"
            onselectstart="javascript:return false;">
            <tr>
                <th width="36">
                    <input type="checkbox" name="checkbox" id="checkAll" onclick="checkAllClick(this)" />
                </th>
                <th width="131">
                    <b>题目名称</b>
                </th>
                <th width="131">
                    <b>题目类型</b>
                </th>
                <th width="114">
                    <b>题目顺序</b>
                </th>
                <th width="114">
                    <b>题目分值</b>
                </th>
                <th width="100" align="center">
                    <b>操作</b>
                </th>
            </tr>
            <!-- BEGIN list -->
            <tr>
                <td align="center" valign="middle">
                    <input type="checkbox" name="checkbox" id="checkbox" subid="#{edu_QnSubject.Id}" />
                </td>
                <td align="center" valign="middle">
                    <a href="#{PreviewItemLink}" class="SIMPO_Table_Name frmBox">#{edu_QnSubject.Title}</a>
                </td>
                <td align="center" valign="middle">
                    #{edu_QnSubject.TypeId}
                </td>
                <td align="center" valign="middle">
                    #{edu_QnSubject.Sort}
                </td>
                <td align="center" valign="middle">
                    #{edu_QnSubject.Score}
                </td>
                <td align="center" valign="middle">
                    <a href="#{edu_QnSubject.EditLink}" title="修改题目" class="frmLink" loadto="divEdit"
                        nolayout="999">
                        <img src="~img/edit.gif" />修改</a> <a href="javascript:void(0)" onclick="delSubject(this)">
                            <img src="~img/delete.gif" />删除</a>
                    <form name="frmDelete" method="post" action="#{edu_QnSubject.DeleteLink}">
                    <input type="hidden" name="templateId" value="#{templateId}" />
                    </form>
                </td>
            </tr>
            <!-- END list -->
        </table>
    </div>
</div>

Controller代码如下：

/// <summary>
/// 调整题目顺序
/// </summary>
public void ChangeSubjectsSort(int templateId)
{
    string subjectIds = ctx.Post("subjectIds");
    string[] subjectIdArray = subjectIds.Split(',');
    for (int i = 0; i < subjectIdArray.Length; i++)
    {
        Edu_QnSubject qnSubject = edu_QnSubjectService.findById<Edu_QnSubject>(int.Parse(subjectIdArray[i]));
        qnSubject.Sort = i + 1;
        Result result = edu_QnSubjectService.update(qnSubject); //保存
    }
    echoText("ok");
}

 效果图（静态图片看不到动态效果，这里示意一下）：