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

JS代码如下：

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

      
    
       题目         预览问卷             添加                                 删除    
       
        
        
                     
          
                           
  
                           
 题目名称 
                           
 题目类型 
                           
 题目顺序 
                           
 题目分值 
                           
 操作 
                      
                                            
                           
  
                           
 #{edu_QnSubject.Title} 
                           
 #{edu_QnSubject.TypeId} 
                           
 #{edu_QnSubject.Sort} 
                           
 #{edu_QnSubject.Score} 
                           
  修改  删除 
            
 
              
            
 
                      
                                       
        
    
       
      

Controller代码如下：

/// 
/// 调整题目顺序/// 
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
      
       (int.Parse(subjectIdArray[i]));        qnSubject.Sort = i + 1;        Result result = edu_QnSubjectService.update(qnSubject); //保存    }    echoText("ok");}
      

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