jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动，拖动后回调,点击可以折叠树型结点，可以用来在后台模仿wordpress后台拖动菜单，实现多级菜单。
GitHub地址： https://github.com/camohub/jquery-sortable-lists
js代码：
var options = { placeholderCss: {'background-color': '#ff8'}, hintCss: {'background-color':'#bbf'}, isAllowed: function(cEl, hint, target){ var parent_id= hint.parents('li').first().data('module'); //当前 parent id var current_id=cEl.data('module'); //当前选中的选项 /** * 表示c选项只能给在自己内部排序与产生子类 */ if(hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c'){ hint.css('background-color', '#ff9999'); return false; }else{ hint.css('background-color', '#99ff99'); return true; } }, opener: { active: true, close: 'images/Remove2.png', open: 'images/Add2.png', openerCss: { 'display': 'inline-block', 'width': '18px', 'height': '18px', 'float': 'left', 'margin-left': '-35px', 'margin-right': '5px', 'background-position': 'center center', 'background-repeat': 'no-repeat' }, openerClass: '' } }, sWrapper = $('#settingsWrapper'); $('#sTree2, #sTree').sortableLists(options);
完整html
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>jQuery可拖拽排序的列表代码</title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen"> <link rel="stylesheet" type="text/css" href="css/github-dark.css" media="screen"> <style type="text/css"> html, body, ul, li { margin:0; padding:0; } ul, li { list-style-type:none; color:#b5e853; border:1px solid #3f3f3f; } ul.sTree, ul{ padding:0px; background-color:#151515; } ul.sTree2 li, ul#sortableListsBase li { padding-left:50px; margin:5px; border:1px solid #3f3f3f; background-color:#3f3f3f; } li div { padding:7px; background-color:#222; Nborder:1px solid #3f3f3f; } li, ul, div { border-radius: 3px; } .red { background-color:#ff9999; } .blue { background-color:#aaaaff;} .green { background-color:#99ff99; } .gree2 { background-color:#bbffbb; } .yellow { background-color:#ff8; } .brown { background-color:#c26b2b; } .pT20 { padding-top:20px; } .pV10 { padding-top:10px; padding-bottom:10px; } .dN { display:none; } .zI1000 { z-index:1000; } .c1 { color:#b5e853; } .c2 { color:#63c0f5; } .c3 { color: #f77720; } .c4 { color: #888; } .bgC1 { background-color:#ccc; } .bgC2 { background-color:#ff8; } .small1 { font-size:0.8em; } .small2 { font-size:0.7em; } .small3 { font-size:0.6em; } .tAR { text-align:right; } .clear { clear:both; } img.descPicture { display:block; width:100%; margin:0 7px 30px 0; float:left; cursor:pointer; /*transition: all 0.5s ease;*/ } img.descPicture.descPictureClose { width:150px; } #sTree2 { margin:10px auto; } </style> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-sortable-lists.min.js"></script> <script type="text/javascript"> $(function() { var options = { placeholderCss: {'background-color': '#ff8'}, hintCss: {'background-color':'#bbf'}, isAllowed: function(cEl, hint, target){ var parent_id= hint.parents('li').first().data('module'); //当前 parent id var current_id=cEl.data('module'); //当前选中的选项 /** * 表示c选项只能给在自己内部排序与产生子类 */ if(hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c'){ hint.css('background-color', '#ff9999'); return false; }else{ hint.css('background-color', '#99ff99'); return true; } }, opener: { active: true, close: 'images/Remove2.png', open: 'images/Add2.png', openerCss: { 'display': 'inline-block', 'width': '18px', 'height': '18px', 'float': 'left', 'margin-left': '-35px', 'margin-right': '5px', 'background-position': 'center center', 'background-repeat': 'no-repeat' }, openerClass: '' } }, sWrapper = $('#settingsWrapper'); $('#sTree2, #sTree').sortableLists(options); $('#toArrBtn').on('click', function(){ console.log($('#sTree2').sortableListsToArray()); }); $('#toHierBtn').on('click', function() { console.log($('#sTree2').sortableListsToHierarchy()); }); $('#toStrBtn').on('click', function() { console.log($('#sTree2').sortableListsToString()); }); $('.descPicture').on('click', function(e) { $(this).toggleClass('descPictureClose'); }); }); </script> </head> <body> <div class="container"> <section id="main_content"> <ul class="sTree2 listsClass" id="sTree2"> <li id="item_a" data-module="a"> <div>选项 a</div> </li> <li class="sortableListsOpen" id="item_b" data-module="b"> <!-- sortableListsOpen 默认打开 --> <div>选项 b</div> <ul class=""> <li id="item_b1" data-module="b"> <div>选项 b1</div> </li> <li id="item_b2" data-module="b"> <div>选项 b2</div> </li> <li id="item_b3" data-module="b"> <div>选项 b3</div> </li> <li id="item_b4" data-module="b"> <div>选项 b4</div> </li> <li id="item_b5" data-module="b"> <div>选项 b5</div> </li> </ul> </li> <li class="" id="item_c" data-module="c"> <div>选项 c</div> <ul class=""> <li id="item_c1" data-module="c"> <div>选项 c1</div> </li> <li id="item_c2" data-module="c"> <div>选项 c2</div> </li> <li id="item_c3" data-module="c"> <div>选项 c3</div> </li> <li id="item_c4" data-module="c"> <div>选项 c4</div> </li> <li id="item_c5" data-module="c"> <div>选项 c5</div> </li> </ul> </li> <li class="" id="item_d" data-module="d"> <div>选项 d</div> <ul class=""> <li id="item_d1" data-module="d"> <div>选项 d1</div> </li> <li id="item_d2" data-module="d"> <div>选项 d2</div> </li> <li id="item_d3" data-module="d"> <div>选项 d3</div> </li> <li id="item_d4" data-module="d"> <div>选项 d4</div> </li> <li id="item_d5" data-module="d"> <div>选项 d5</div> </li> </ul> </li> <li class="" id="item_e" data-module="e"> <div>选项 e</div> </li> <li class="" id="item_f" data-module="f"> <div>选项 f</div> </li> </ul> </section> </div> </body> </html>
