三級選單拖拽排序，各級互不影響，理論上可以無限級選單

阿新 • • 發佈：2019-01-18

<!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>

三級選單拖拽排序，各級互不影響，理論上可以無限級選單

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 門戶元件（Por

整理一份拖拽排序自動儲存的程式碼，後臺是php

jQuery 拖拽排序（選單，圖片）

無意間看到的一個外掛，引入jquery.min.js，jquery-sort.min.js檔案，網盤地址：https://pan.baidu.com/s/1pSJ0PsVH1uT4mXbf2f0ETg 程式碼如下： <!Doctype html> <html> &

拖拽排序插件 ---- Dragula

sof -- style http size mil spa 否則 bsp 相關鏈接： https://github.com/bevacqua/react-dragula https://github.com/bevacqua/react-dragula demo:

Javascript寫的一個可拖拽排序的列表

自己 pos 清除 children align 定義 width nbsp console 自己常試寫了一個可拖拽進行自定義排序的列表，可能寫的不太好，歡迎提供意見。我的思路是將列表中的所有項都放進一個包裹層，將該包裹層設為相對定位，每當點擊一個項時，將該項脫離文檔並

Sortable拖拽排序插件數據篩選

mark var body pos post push _id java ble 後臺有拖拽排序功能，然而前段在開發的時候，一整頁的數據都發給後端了。於是查看前端代碼，想到了如下解決辦法，即先把排序前的保存，然後對比排序後的，有差異的才發回給後端。 var new_ids

jQuery實現div橫向拖拽排序

src AR img blog set 排序局部變量 -a 圖片參考:https://blog.csdn.net/kongjiea/article/details/45578033 效果圖: html <h1>div橫向拖拽排序</h1>

基於html5拖拽api實現列表的拖拽排序

ins urn attribute ret plain drag top round nodes 基於html5拖拽api實現列表的拖拽排序 html代碼： <ul ondrop="drop_handler(event);" ondragover="drago

RecyclerView的中級進階側滑刪除和拖拽排序

RecyclerView相信大家都已經瞭解,以前我們使用的listView,gradView漸漸的使用的人越來越少.可以說RecyclerView肯定會取代listView,gradView.今天我們來講講recyclerview的側滑刪除和拖拽排序.不瞭解RecyclerView的請自

列表拖拽排序功能

前幾天在做專案的時候，遇到一個表格裡邊的資料通過上下拖拽來改變其排序方式，後來通過一陣查詢，發現jquery-ui提供了sortable這個方法，甚是歡喜，在此便把我寫的小demo奉上： <!doctype html> <html lang="en"> <head>

基於Vue實現可以拖拽排序的樹形表格

專案需要一個可以拖拽排序的樹形表格，github上搜了一下，併為找到，大部分都不支援拖拽，所以自己實現了一個簡單的元件，已開源原始碼在這裡，併發布到npm上，如果有類似需求可以試一下，chrome上沒有任何問題效果圖如下： drag-tree-table 使用方式

圖片上傳、拖拽排序

solid mat click log 插件 sync 引用 min fin 　　　最近的項目中遇到這樣一個需求，要求在上傳圖片時可多圖片上傳，並且可以拖拽排序。前面多圖片上傳比較好實現，網上一大片的教程、插件可供學習使用，可又要求可以拖拽排序，我也沒找到現有的代碼，自己也

Android 個人相簿圖片拖拽排序

效果圖如下：具體核心程式碼： private ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.Callback() { @Override public int ge

php處理拖拽排序後臺程式

前端傳遞位置（不是id）初始位置：oldIndex 結束位置：newIndex <?php /** * @author liaosp.top * Time: ${Date} -11:27 * version 1.0 */ //$a1=array(10=>0,

vue拖拽克隆元件 vue.draggable API options實現盒子之間相互拖拽排序克隆clone

vue拖拽克隆clone元件API， vue.draggable實現盒子之間相互拖拽排序克隆（網上資源整理的文件）效果圖：首先需要安裝vuedraggable依賴包： npm install vuedraggable --save 複製vue html程式碼到專案：

php處理拖拽排序

前端傳遞位置（不是id）初始位置：oldIndex 結束位置：newIndex <?php /** * @author liaosp.top * Time: ${Date} -11:27

使用angular-ui-sortable實現可拖拽排序列表

專案需求，新增列表可拖拽排序功能，谷歌了一下，找到一個Angular的外掛：angular-ui-sortable，專案地址：https://github.com/angular-ui/ui-sortable需要在之前引入jquery，和jquery-ui，否則無法使

Recyclerview實現網格拖拽排序

門禁列表排序需求效果是：前兩行是常用門禁，黃色顯示，之後是普通門，白色顯示。按住一個門時，除了被按住的門，其他門抖動，被按住門加陰影。常用門和普通門交換位置時，開啟漸變動畫。演示：

zTree 拖拽排序

首先配置zTree的相關屬性 var setting = { callback: { beforeDrop: beforeDrog//用於捕

kissy 拖拽排序

des url clone one nbsp else UNC public after 拖拽 html: <link rel="stylesheet" href="http://wwwcdn.kimiss.net/public/bootstrap/

三級選單拖拽排序，各級互不影響，理論上可以無限級選單

相關推薦