Nestable-master

编写嵌套的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>

然后激活jQuery像这样：

$('.dd').nestable({ /* config options */ });

该change项目时重新排序事件。

$('.dd').on('change', function() {
    /* on change event */
});

$('.dd').nestable('serialize');

上面示例的序列化JSON将是：

[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]

可以更改以下选项：

• maxDepth各级项目可以嵌套数（默认5）
• group组ID，允许列表之间拖动（默认0）

这些高级配置选项也可用：

• listNodeNameHTML元素创建列表（默认'ol'）
• itemNodeNameHTML元素创建列表项目（默认'li'）
• rootClass类根元素.nestable()被上使用（默认'dd'）
• listClass在类的所有列表中的元素（默认'dd-list'）
• itemClass在类的所有列表项元素（默认'dd-item'）
• dragClass应用于列表元素类正在拖动（默认'dd-dragel'）
• handleClass类每个列表项中的内容元素（默认'dd-handle'）
• collapsedClass适用于列出类已经倒塌（默认'dd-collapsed'）
• placeClass类占位符元素（默认'dd-placeholder'）
• emptyClass用于空列表占位符元素类（默认'dd-empty'）
• expandBtnHTML用来生成一个列表项展开按钮的HTML文本（默认'<button data-action="expand">Expand></button>'）
• collapseBtnHTML用来生成一个列表项折叠按钮的HTML文本（默认'<button data-action="collapse">Collapse</button>'）
•