java实现表格tr拖动的实例(分享)

<div id="maincontainer">
     <div class="contentcol">
      <div id="b_center">
       <div class="mod mod1 parent-table" id="launch-detail-table">
         <div class="mod-header radius">
          <h2 style="margin-bottom:0px;margin-top:0px;height:43px;line-height:43px;">
           菜单管理   
          </h2>
          <span style="color:red">请使用拖拽调整排列顺序</span>
          <button id="addlg" type="button" class="czbtn add_class" style="width:140px;margin-left:20px;">
          <img alt="" src="/center/images/btn_add.png">   添加菜单</button>
         </div>
         <br>
         <div class="mod-body">
          <table class="data-load-2 appgrouping" width="100%" border="0"
           cellspacing="0" id="showtable"
           style="word-wrap: break-word; word-break: break-all;table-layout: inherit;background:#ffffff !important;">
           <thead>
            <tr class="first_tr" >
             <th class="first" width="50" style="text-align: center;width:10%;">编号</th>
             <th width="400" align="center" style="text-align: center;width:17%">菜单名称</th>
             <!-- <th width="160" align="center" style="text-align: center">菜单级别</th>
             <th width="80" align="center" style="text-align: center">二级菜单</th>-->
             <th width="100" align="center" style="text-align: center;width:18%">菜单英文名称</th>
             <th align="center" style="text-align: center;width:15%">菜单类型</th>
             <th align="center" style="text-align: center;width:20%">是否显示</th>
             <th width="210" align="center" style="text-align: center;width:20%">操作</th>
            </tr>
           </thead>
          
           <tbody id="data-list" style="text-align: center;">
            <%
             if (menulist != null && menulist.size() > 0) {
               for (int i = 0;i < menulist.size();i++) {
               jsonobject json = menulist.getjsonobject(i);
               menu menu = (menu)jsonobject.tobean(json.getjsonobject("menu"),menu.class);
            %>
            <tr id="<%=menu.getlevel() %>">
             <td id="<%=menu.getmenuid() %>">
              <%=menu.getlevel()%>
             </td>
             <td>
              <div class="menuname"><%=menu.getmenuname()%></div>
             </td>
             <td>
              <div class="menuname"><%=menu.getenmenuname()==null?"":menu.getenmenuname()%></div>
             </td>
             <!-- <td>
              <div class="menulevel"><%//if(menu.gethassecond() == 1){%>一级菜单<%//}else{%>二级菜单<%//}%></div>
             </td>
             <td>
              <div class="ischild"><%//if(json.getstring("ischild").equals("1")){%><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="getchildmenu('<%//menu.getmenuid()%>')">查看</a><%//} else{%>无<%//}%></div>
             </td> -->
             <td>
              <div class="menuname"><%if(menu.getmenutype() == 0){%>系统类型<%}else if(menu.getmenutype() == 1){%>图文类型<%}else{%>链接类型<%}%></div>
             </td>
             <td>
              <%if(menu.getstate() == 0){ %>
              <button type="button" onclick="changemenustate('<%=menu.getmenuname() %>',<%=menu.getmenuid() %>,1)" class="showstate czbtn">显示</button>
              <button type="button" class="czbtn" style="background: #eaeaea;color: #d0d0d0;">已隐藏</button>
              <%}else{ %>
              <button type="button" class="czbtn" style="background: #eaeaea;color: #d0d0d0;">已显示</button>
              <button type="button" onclick="changemenustate('<%=menu.getmenuname() %>',<%=menu.getmenuid() %>,0)" class="hidestate czbtn">隐藏</button>
              <%} %>
             </td>
             <td>
              <%if(menu.getmenutype() != 0) {%><div>
              <div style="float: right;margin-right:10px;">
               <a title="删除" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:red;width:30px;display:inline-block;" id="<%=menu.getmenuid()%>" class="icon-trash delmtcenter">
                
               </a>
              </div>
              <%} %>
              <%if(menu.getmenutype() != 0) {%>
              <div style="float: right;margin-right:10px;">
               <a title="修改" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:red;width:30px;display:inline-block;" id="<%=menu.getmenuid()%>" class="icon-pencil mer_mod">
                
               </a>
              </div>
              <%} %>
             </td>
            </tr>
            <%
             }
              } else {
            %>
            <tr>
             <td colspan="6" align="center">
              暂无数据
             </td>
            </tr>
            <%
             }
            %>
           </tbody>
          </table>
         </div>
        <div class="mod-bottom clearfix">
         <div class="fr pagination"></div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="ft" style="height: 50px;line-height: 50px;">
   <div class="copyright" style="display: none;">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于我们</a> |
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >微博</a> |
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >blog</a> |
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >服务条款 </a> |
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐私政策</a>
   </div>
   <p class="copy">incongress.com, all rights reserved.<span class="icp"></span></p>
  </div>
  <script src="/cvc/center/js/cached_lay_reports.js" type="text/javascript"></script>
  <script src="/cvc/center/js/cached_lay_reports_cus.js" type="text/javascript"></script>
  <div id="mask"></div>
  <div class="tkdiv" id="addlogo" style="display:none;z-index:12;width:800px;height:auto;margin-left:-50px;">
   
    <div class="tk1_header" style="width:800px !important;height:40px;line-height:40px;margin-left:-10px;margin-top:-10px;">
     <span style="font-size: 16px;margin-left:20px;color:#fff;margin-top:-5px;" id="gn_title" >添加菜单</span>
     <a id="close_modal" style="width:30px;height:20px;background:url('/chc2015/cn/images/close.png') no-repeat 0px 10px;float: right;">×</a>
    </div>
    <div class="tk1" id="addz" style="width:790px;height:260px;margin-left:-2px;overflow-y:auto;">
    <div class="tk1_content" id="registerdiv" style="width:750px;margin-top:-10px;">
     <form id="menuform" class="bs-docs-example form-horizontal" method="post" action="<%=path %>/webcenter.do">
     <input type="hidden" name="method" value="saveorupdatemenu">
    <input type="hidden" name="pageindex" value="1">
    <input type="hidden" name="conid" value="<%=conid %>">
    <input type="hidden" name="numb1" value="<%=numb1 %>">
    <input type="hidden" name="numb2" value="<%=numb2 %>">
    <input type="hidden" id="menuid" name="menuid" value="-1">
      <table style="width:750px">
       <tr >
        <td><span >菜单名称</span></td>
        <td><input type="text" id="menu_name" class="form-control" name="menuname" style="margin:10px 0px;display:inline-block;height:34px;"/><span class="showworing"></span></td>
       </tr>
       <!-- <tr>
        <td>菜单级别：</td>
        <td>
         <select id="menu_level" name="menu_level" style="margin:10px 0px">
          <option value="-1">请选择...</option>
          <option value="1">一级菜单</option>
          <option value="2">二级菜单</option>
         </select>
         <span class="showworing"></span>
        </td>
       </tr>
       <tr id="menu_parent_tr" style="display: none">
        <td>父级菜单：</td>
        <td>
         <select id="menu_parent" name="menu_parent" style="margin:10px 0px">
          <option value="-1">请选择...</option>
         </select>
         <span class="showworing"></span>
        </td>
       </tr>-->
       <tr>
        <td>菜单类型</td>
        <td>
         <select id="menutype" class="form-control" name="menutype" style="margin:10px 0px;display:inline-block;width:350px;">
          <option value="-1">请选择...</option>
          <option value="1">图文类型</option>
          <option value="2">链接类型</option>
         </select>
       </td>
       </tr>
       <tr id="imgtexttr" style="display:none">
        <td>
         图文内容
        </td>
        <td>
         <textarea rows="45" cols="70" class="form-control" name="menucontent" id="menucontent" style="display:inline-block;"></textarea>
        </td>   
       </tr>
       <tr id="linktr" style="display:none">
        <td>跳转地址</td>
        <td>请填写完整的外链地址，必须包含<span style="color:red">http://</span> 例如:http://www.baidu.com</br><input type="text" id="menuurl" name="menuurl" style="margin:10px 0px"/><span class="showworing" style="margin:10px 0px"></span></td>
       </tr>      
       <tr>
        <td align="center" colspan="2">
        <hr style="margin-bottom:10px;">
         <input id="menu_add" type="button" class="button" value="添　加" style="border-radius:0;width:260px;height:40px;margin:auto 50px;margin:20px"/>
        </td>
       </tr>
      </table>
     </form>
    </div>
   </div>
  </div>
  <div class="tkdiv" id="childmenu" style="display:none;z-index:12;width:650px;height:auto;margin-left:-325px;">
   <div class="tk1" id="childz" style="width:600px;height:350px;">
    <div class="tk1_header" style="margin-top:-40px;">
     <span style="font-size: 16px;margin-left:20px;color:#fff" id="gn_title">二级菜单</span>
     <a id="close_modal" style="width:30px;height:40px;background:url('/chc2015/cn/images/close.png') no-repeat 0px 10px;background-size:20px;float: right;"></a>
    </div>
    <div class="tk1_content" id="registerdiv" style="width:600px;">
     <table class="data-load-2 appgrouping" width="100%" border="0"
           cellspacing="0"
           style="word-wrap: break-word; word-break: break-all;table-layout: inherit;">
           <thead>
            <tr class="first_tr">
             <th class="first" width="50" style="text-align: center">编号</th>
             <th width="200" align="center" style="text-align: center">菜单名称</th>
             <th width="160" align="center" style="text-align: center">菜单级别</th>
             <th width="80" align="center" style="text-align: center">二级菜单</th>
             <th width="80" align="center" style="text-align: center">菜单类型</th>
             <th width="80" align="center" style="text-align: center">修改</th>
             <th width="80" align="center" style="text-align: center">删除</th>
            </tr>
           </thead>
    </table>
    </div>
   </div>
  </div>
   <script type="text/javascript" src="<%=path %>/cvc/center/js/my97datepicker/wdatepicker.js"></script>
  <script src="<%=path%>/cvc/center/js/setting.js" type="text/javascript"></script>
  <script src="<%=path%>/cvc/center/js/validform_v5.3.2.js" type="text/javascript"></script>
  <script charset="utf-8" src="<%=path%>/train/js/prettify/kindeditor.js"></script>
  <script charset="utf-8" src="<%=path%>/train/js/prettify/lang/zh_cn.js"></script>
  <script charset="utf-8" src="<%=path%>/train/js/prettify/plugins/code/prettify.js"></script>
  <script type="text/javascript" src="<%=path %>/cvc/center/js/jquery-1.10.2.min.js"></script>
  <script charset="utf-8" type="text/javascript" src="<%=path %>/center/js/jquery-ui.min.js"></script>
 <script>
 var editor1;
 //改变菜单显示隐藏状态
 function changemenustate(menuname,menuid,state){
  /*
  if(menuname == "征文投稿"){
   alert("请到基本信息模块中设置当前大会是否征文");
  }else */if(menuname == "english"){
   alert("请到基本信息模块中设置当前大会的中英文类型");
  }else{
   $.ajax({
    url:"/webcenter.do",
    type:"post",
    datatype:"json",
    data:"method=changemenustate&menuid="+menuid+"&menustate="+state,
    success:function(json){
     if(json.state == 1){
      window.location.reload();
     }else{
      alert("修改失败");
     }
    }
   })
  }
 }
 
  $("#showtable").sortable({
   cursor: "move", 
   items: "tr", //只是tr可以拖动 
   opacity: 0.6, //拖动时，透明度为0.6 
   revert: true, //释放时，增加动画 
   stop: function(event, ui) { //更新排序之后 
    var categoryids = $("#showtable").sortable("toarray");
    localstorage.categoryids = categoryids;
    var level = 0;
    $("#showtable tr").each(function(){
     $(this).children("td").eq(0).html(level);
     level += 1;
    })
    level = 0;
    var content = "[";
    $("#showtable tr").each(function(){
     var level = $(this).children("td").eq(0).html();
     var tdid = $(this).children("td").eq(0).attr("id");
     if(tdid != undefined){
      if(level == 1){
       content += "{level:"+level;
       content += ",menuid:"+tdid;
       content += "}";
      }else if(level > 1){
       content += ",{level:"+level;
       content += ",menuid:"+tdid;
       content += "}";
      }
      
     }
     level += 1;
    })
    content += "]";
    $.ajax({
     url:"<%=path%>/webcenter.do?updatemenulevel",
     type:"post",
     datatype:"json",
     data:"menulist="+content,
     success:function(json){
     }
    })
   }
  });
  $("#showtable").disableselection();//让文字不可选
   //选择二级菜单
   $("#menu_level").change(function(){
    $("#menu_parent").empty();
    $("#menu_parent").append("<option value='-1'>请选择...</option>")
    var level = $("#menu_level").val();
    if(level == 1){
     $("#menu_parent_tr").hide();
    }else if(level == 2){
     $.ajax({
      url:"<%=path%>/webcenter.do?getfirstmenu",
      type:"get",
      datatype:"json",
      success:function(result){
       if(result != null && result != "" && result.length > 0){
        for(var i = 0; i< result.length;i++){
         var option = "<option value='"+result[i].menuid+"'>"+result[i].menuname+"</option>"
         console.log(option)
         $("#menu_parent").append(option);
        }
       }else{
        alert("还未创建任何一级菜单，先创建一级菜单后再创建耳机菜单");
       }
      }
     })
     $("#menu_parent_tr").show();
    }
   })
   
   //选择图文类型
   $("#menutype").change(function(){
    if($("#menutype").val() == 1){
     $("#imgtexttr").show();
     $("#linktr").hide();
     $("#addz").css("height","450px")
    }else if($("#menutype").val() == 2){
     $("#imgtexttr").hide();
     $("#linktr").show();
     $("#addz").css("height","180px")
    }
   })
  //添加
  $("#menu_add").click(function() {
   var menuname = $("#menu_name").val();
   var menulevel = $("#menu_level").val();
   var menutype = $("#menutype").val();
   var menuurl = $("#menuurl").val();
   if(menuname.trim() == "" || menuname.trim().length == 0){
    alert("请输入菜单名称");
    return false;
   }
   if(menutype == "-1"){
    alert("请选择菜单类型");
    return false;
   }
   if($("#menutype").val() == 1){
    if($("#menucontent").val().trim() == "" || $("#menucontent").val().trim().length == 0){
     alert("请填写图文内容");
     return false;
    }
   }
   if($("#menutype").val() == 2){
    if(menuurl.trim() == "" || menuurl.trim().length == 0){
     alert("请输入跳转地址");
     return false;
    }
   }
   var menucount = <%=menulistsize%>;
   if(menucount >= 19 && $("#menuid").val() == -1){
    alert("菜单最多只能添加九个");
    return false;
   }
   
   $("#menuform").submit();
   $("#mask").hide();
   $("#addlogo").hide();
   $("body").css("position", "fixed");
  })
  //弹出窗口
  $("#addlg").click(function() {
   $("#mask").show();
   $("#addlogo").show();
   })
  //取消
  $(".tk1_header").click(function() {
    location.reload();
  })
  $("#close").click(function() {
   $("#zstype").val(0);
   $("#zshref").val("");
   $("#mask").hide();
   $("#addlogo").hide();
   $("body").css("position", "static");
  })
  //修改
  $(".mer_mod").click(function() {
   $("#mask").show();
   $("#addlogo").show();
   $("body").css("position", "fixed");
   $("#menuid").val(this.id);
   $.ajax({
    url:"<%=path%>/webcenter.do?getmenubyid",
    type:"get",
    data:"menuid="+this.id,
    datatype:"json",
    success:function(data){
     $("#menu_name").val(data.menuname);
     $("#menutype").val(data.menutype);
     if(data.menutype == 1){
      $("#imgtexttr").show();
       $("#linktr").hide();
       $("#addz").css("height","450px")
       editor1.html(data.content);
     }if(data.menutype == 2){
      $("#imgtexttr").hide();
       $("#linktr").show();
       $("#addz").css("height","80px")
     }
    }
    
   })
  })</script>
 </body>
</html>
<%
 }
}
%>

@requestmapping(params = "updatemenulevel",method = requestmethod.post)
  public void updatemenulevel(string menulist,httpservletrequest request,httpservletresponse response){
    try {
      httpsession session = this.getsession(request);
      adminuser adminuser = session.getattribute("centeradminuser") == null?null:(adminuser) session.getattribute("centeradminuser");
      if(adminuser == null){
        try {
          response.sendredirect(request.getcontextpath()+"/center/index.jsp");
        } catch (exception e) {
          e.printstacktrace();
        }
      }else{
        string conid = request.getsession().getattribute("conid") == null ? null: request.getsession().getattribute("conid").tostring();
        if (conid == null) {
          response.sendredirect(request.getcontextpath()+"/center/index.jsp");
        }
        jsonarray array = jsonarray.fromobject(menulist);
        for(int i = 0;i < array.size();i++){
          jsonobject json = array.getjsonobject(i);
          menu menu = webservice.getmenubyid(json.getint("menuid"));
          menu.setlevel(json.getint("level"));
          webservice.saveobject(menu);
        }
      }
    } catch (exception e) {
      e.printstacktrace();
    }