Nestable是 一个可拖拽的树结构表现插件。

示例效果

使用方法

1.引入jquery.js和jquery.nestable.js

2.使用方法示例

html代码

<div class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4</div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

js代码

$(function() {
    $('.dd').nestable({ /* config options */ });
    $('.dd').nestable(); //初始化
    $('.dd').nestable('serialize'); //取得指定内存块中的元素拖拉后的结构 
    $('.dd').on('change', function() {
        /* on change event */
    });
    $('.dd').nestable('expandAll'); //展开所有节点 
    $('.dd').nestable('collapseAll'); //折叠所有节点  
});

配置参数说明

group(选填) 
描述：用来指定允许交互拖放插入的群组 
预设值： 0

maxDepth(选填) 
描述：最多允许有几个阶层 
预设值： 5

threshold(选填) 
描述： 
预设值： 20

listNodeName(选填) 
描述：要用来产生拖拉的元素 
预设值： ‘o1’

itemNodeName(选填) 
描述：要用来产生拖拉的元素项目 
预设值： ‘li’

rootClass(选填) 
描述：拖拉样式的前缀 
预设值： ‘dd’

listClass(选填) 
描述：要用来产生拖拉的元素所套用的样式 
预设值： ‘dd-list’

itemClass(选填) 
描述：要用来产生拖拉的元素项目所套用的样式 
预设值： ‘dd-item’

dragClass(选填) 
描述：当元素被拖拉时所套用的样式 
预设值： ‘dd-dragel’

handleClass(选填) 
描述：用来拖拉的控件所套用的样式 
预设值： ‘dd-handle’

collapsedClass(选填) 
描述：当元素项目有子元素可以展开时所套用的样式 
预设值： ‘dd-collapsed’

placeClass(选填) 
描述：用来暂位用的元素所套用的样式 
预设值： ‘dd-placeholder’

emptyClass(选填) 
描述：当元素中没有任何可拖拉的元素项目时所套用的样式 
预设值： ‘dd-empty’

expandBtnHTML(选填) 
描述：用来产生可以用来点击展开用的按钮 
預設值： ‘Expand’

collapseBtnHTML(选填) 
描述：用来产生可以用来点击收合用的按钮 
预设值： ‘Collapse’

下载地址

Nestable-master.zip