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" onclick= "addlist()" >

   <input type= "button" name= "" value= "排  序" class = "m_sort" onclick= "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>