Nestable 基于 jQuery 目录拖拽插件

Question

Nestable 是一个基于 jQuery 目录拖拽插件，完美兼容 鼠标 和 触摸 操作。

用法

像这样编写嵌套的 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 */
});

方法

您可以获得一个序列化对象，其中包含 data-* 每个项目的所有属性。

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

上面示例的序列化 JSON 为：

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

配置

您可以更改以下选项：

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

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

• listNodeName 为列表创建的 HTML 元素（默认 'ol'）
• itemNodeName 为列表项创建的 HTML 元素（默认 '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>'）

项目地址：https://github.com/dbushell/Nestable