三級選單拖拽排序,各級互不影響,理論上可以無限級選單
<!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
<style> .tuozhuaitr{ cursor: pointer; } </style> <table wid
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/