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

最新推荐文章于 2024-07-18 10:01:45 发布
我为bug代言
最新推荐文章于 2024-07-18 10:01:45 发布
阅读量1k
点赞数 1
分类专栏：其他文章标签： jquery js
本文链接：https://blog.csdn.net/xu_xiao_ji/article/details/78552706
版权
其他专栏收录该内容
13 篇文章 1 订阅
订阅专栏
<!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 οnclick="getEndOrder();">一个 button 元素</button>
 
</body>
</html>