web中拖拽排序和java后台交互实现方法示例

<!--起始的页面-->
 <div class=\"listMain\">
  <div class=\"addData\">
  <ul class=\"dataList\" id=\"dataList${var.ID }\">
  <c:forEach items=\"${varList }\" var=\"movieParam\" varStatus=\"varSatus\"> 
  <li class=\"dataList_Child\">
   <input type=\"hidden\" class=\"idSort\" value=\"${movieParam.id }\" /> <!--id值-->
   <p class=\"datali_name\">${movieParam.NAME }</p> <!--页面中的9999,888,555,333的值-->
   <input type=\"hidden\" class=\"seqSort\" /> <!--存放sort序号值的地方-->
　　　　　　　　　　　　　　　　　　　</li>
  </c:forEach>
  </ul>
  <input type=\"button\" name=\"\" value=\"新  增\" class=\"Add_listButton\"  =\"addList()\">
  <input type=\"button\" name=\"\" value=\"排  序\" class=\"M_sort\"  =\"getSortList()\" >
  </div> 
　　　　　　　　</div>

<!--排序页面-->
　　　　　　　　<div class=\"M_sortMain\">
　　　　　　　　　　<form action=\"movieparam/editSort.do\" method=\"post\">
  　　<div class=\"M_sortMain_wrap\">
  　　<span class=\"close_M_sortMain\"></span>
   <div class=\"sortOul\">
   <ul class=\"sortOulMain\"></ul>
   </div>
  　　</div>
  　　<input type=\"submit\" value=\"提交\" class=\"sort_submit\">
　　　　　　　　　　</form>
　　　　　　　　</div>

//点击排序:1,将当前页面装到指定的div;2,给对应的两个隐藏的input框添加name属性,便于后台接收;3,为sort的隐藏的input赋予sort序号值
　　　　　　function getSortList(){
　　　　　　　 $(\".M_sortMain\").css(\"display\",\"block\"); //遮罩页面显示
  $(\".sortOulMain\").html($(\".listMain\").html()); //将当前页面装到指定的div
  $(\"li\").each(function(){
   var seq_attr = \'movieParams[\'+$(this).index()+\'].sort\';
   var id_attr = \'movieParams[\'+$(this).index()+\'].id\';
   $(this).children(\".seqSort\").attr(\'name\',seq_attr); //为序号框添加name属性
   $(this).children(\".seqSort\").val($(this).index()) //为sort的隐藏的input赋予sort序号值
   $(this).children(\".idSort\").attr(\'name\',id_attr); //为id框添加name属性
  })
　　　　　　　}

// 排序事件中的拖拽事件
  $(\'.sortOulMain\').DDSort({
  target: \'li\',
  floatStyle: {
   \'border\': \'1px solid #ccc\',
   \'background-color\': \'#fff\',
   \'cursor\': \'move\'
  },
  //每次拖拽完成之后都会执行的函数
  up: function () {
  $(\"li\").each(function(){
   $(this).children(\".seqSort\").val($(this).index()); //改变全新的sort隐藏的input的序号值
   })
  }
　　　　　　});

　　@RequestMapping(\"editSeq\")
　　public ModelAndView editSeq(MovieParamListForm movieParamList)throws Exception{  
　　　　//判空操作这里省略了
　　　　movieParamService.editSeq(movieParamList.getMovieParams());
　　}

<update id=\"editSeq\" parameterType=\"java.util.List\"> 
 <foreach collection=\"list\" item=\"var\" index=\"index\" open=\"\" close=\"\" separator=\";\"> 
  update t_params 
  <set> 
  　　sort= #{var.sort}
  </set> 
  where id= #{var.id} 
 </foreach> 
　　</update>