jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动，拖动后回调,点击可以折叠树型结点，可以用来在后台模仿wordpress后台拖动菜单，实现多级菜单。
GitHub地址： https://github.com/ca*b/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>