原理就是利用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="width: 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");
}

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