js
//引入js和css 当然jquery是必备的
jquery.nestable.js
jquery.nestable.css
//有时候不需要拖动,在jquery.nestable.js文件中找到这一句js(大概107行)
list.dragStart(e.touches ? e.touches[0] : e)
var updateOutput = function (e) {
var list = e.length ? e : $(e.target),
output = list.data('output');
if (window.JSON) {
output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
} else {
output.val('浏览器不支持');
}
};
$('#nestable2').nestable({
group: 1
}).on('change', updateOutput);
updateOutput($('#nestable2').data('output', $('#nestable2-output')));
$('#nestable-menu').on('click', function (e) {
var target = $(e.target),
action = target.data('action');
if (action === 'expand-all') {
$('.dd').nestable('expandAll');
}
if (action === 'collapse-all') {
$('.dd').nestable('collapseAll');
}
});
html
“`
<div id="nestable-menu">
<button type="button" data-action="expand-all" class="btn btn-white btn-sm btn-mini">全部展开</button>
<button type="button" data-action="collapse-all" class="btn btn-white btn-sm btn-mini">收起全部</button>
</div>
<div class="cf nestable-lists">
<div class="dd" id="nestable2">
<ol class="dd-list dark">
<li class="dd-item " data-id="13">
<div class="dd-handle">Item 13</div>
</li>
<li class="dd-item" data-id="14">
<div class="dd-handle">Item 14</div>
</li>
<li class="dd-item" data-id="15">
<div class="dd-handle">Item 15</div>
<ol class="dd-list">
<li class="dd-item" data-id="16"><div class="dd-handle">Item 16</div></li>
<li class="dd-item" data-id="17"><div class="dd-handle">Item 17</div></li>
<li class="dd-item" data-id="18"><div class="dd-handle">Item 18</div></li>
</ol>
</li>
</ol>
</div>
<div class="clearfix"></div>
</div>
“`
到此结束 一个简单的demo就好了,这个有些瑕疵的地方是不能直接传json,只能自己按照特定的格式遍历出来才能使用,如果你有好的方法,欢迎讨论。