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         </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                               </a>              </div>              <%} %>              <%if(menu.getMenuType() != 0) {%>              <div style="float: right;margin-right:10px;">               <a                               </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();    }