三级菜单拖拽排序，各级互不影响，理论上可以无限级菜单

来源：互联网发布：网络语言暴力的定义编辑：程序博客网时间：2024/05/24 07:22
<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery UI 排序（Sortable） - 门户组件（Portlets）</title>  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>  <link rel="stylesheet" href="jqueryui/style.css"> <style>  .portlet {    margin: 0 1em 1em 0;    padding: 0.3em;  }  </style>  <script>  $(function() {    $( ".column" ).sortable();    $( ".portlet" )      .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )      .find( ".portlet-header" )        .addClass( "ui-widget-header ui-corner-all" )        .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");     $( ".portlet-toggle" ).click(function() {      var icon = $( this );      icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();    });  });  var updateOrderMap={};  function getEndOrder(){    var lv1order=0;  var lv2order=0;  var lv3order=0;  //遍历页面每一个portlet  $("#showTable  div  div.portlet").each(function(){  var divlv=$(this);  var lv=divlv.attr("lv");  if(1==lv){  lv1order++;  lv2order=0;  lv3order=0;  divlv.attr("endorder",lv1order);  setUpdateOrderMap(divlv.attr("order"),divlv.attr("endorder"),divlv.attr("id"));  }else     if(2==lv){  lv3order=0;  lv2order++;  divlv.attr("endorder",lv2order);  setUpdateOrderMap(divlv.attr("order"),divlv.attr("endorder"),divlv.attr("id"));  }else  if(3==lv){  lv3order++;  divlv.attr("endorder",lv3order);  setUpdateOrderMap(divlv.attr("order"),divlv.attr("endorder"),divlv.attr("id"));  }  });  debugger;  alert(updateOrderMap);  }//通过map 设置变更位置的数据的id对应的最新排序 function setUpdateOrderMap(order,endorder,id){    if(order!=endorder){  updateOrderMap[id]=endorder;  }  }  </script></head><body id="showTable"> <div class="column" >   <div class="portlet" lv=1 order=1 endorder=1 id=1>    <div class="portlet-header">订阅1</div>    <div class="portlet-content"><div class="column">  <div class="portlet" lv=2 order=1 endorder=1 id=11><div class="portlet-header">-------订阅11</div><div class="portlet-content"> <div class="column">  <div class="portlet" lv=3 order=1 endorder=1 id=111><div class="portlet-header">------======订阅111</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" lv=3 order=2 endorder=1 id=112><div class="portlet-header">------======新闻112</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" lv=3 order=3 endorder=1 id=113><div class="portlet-header">------======购物113</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div></div>  </div>  </div>  <div class="portlet" lv=2 order=2 endorder=1 id=12><div class="portlet-header">------新闻12</div><div class="portlet-content"><div class="column">  <div class="portlet" lv=3 order=1 endorder=1 id=121><div class="portlet-header">------======订阅121</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" lv=3 order=2 endorder=1 id=122><div class="portlet-header">------======新闻122</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" lv=3 order=3 endorder=1 id=123><div class="portlet-header">------======购物123</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div></div>   </div>  </div>  <div class="portlet" lv=2 order=3 endorder=1 id=13><div class="portlet-header">------购物13</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div></div>  </div>  </div>   <div class="portlet" lv=1 order=2 endorder=1 id=2>    <div class="portlet-header">新闻2</div>    <div class="portlet-content"><div class="column">  <div class="portlet" lv=2 order=1 endorder=1 id=21><div class="portlet-header">------订阅21</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" lv=2 order=2 endorder=1 id=22><div class="portlet-header">------新闻22</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" lv=2 order=3 endorder=1 id=23><div class="portlet-header">------购物23</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div></div>  </div>  </div>   <div class="portlet" lv=1 order=3 endorder=1 id=3>    <div class="portlet-header">购物3</div>    <div class="portlet-content"><div class="column">  <div class="portlet" lv=2 order=1 endorder=1 id=31><div class="portlet-header">------订阅31</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" lv=2 order=2 endorder=1 id=32><div class="portlet-header">------新闻32</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" lv=2 order=3 endorder=1 id=33><div class="portlet-header">------购物33</div><div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div></div>  </div>  </div> </div>  <button onclick="getEndOrder();">一个 button 元素</button> </body></html>
阅读全文
0 0