可嵌套/Nestable

创建可以通过拖拽排序的可嵌套式列表。

可嵌套组件允许你通过拖拽排序条目。这是非常有用的，比如在管理界面中希望组织不同的分类或者菜单条目时。

用法

可嵌套列表由列表本身、它的内容条目和可嵌套的面板组成。注意 使用此组件需要额外添加 nestable.css 文件，在css/components文件夹中。此组件需要额外添加 nestable.js 文件，在js/components文件夹中。

NOTE 为了使必要的JavaScript生效，需要添加 data-uk-nestable 属性。

Example

• Item 1
• Item 2
• Item 3
• Item 4

Markup

<ul class="uk-nestable" data-uk-nestable>
    <li class="uk-nestable-item">
        <div class="uk-nestable-panel"> ... </div>
    </li>
</ul>

可嵌套组件的手柄/Nestable handle

默认地，整个可嵌套元素都可以用来拖拽排序。要创建一个替换默认效果的手柄，需要添加 {handleClass:'uk-nestable-handle'} 选项到data 属性中。并为你想要用作手柄的元素添加手柄的类名。

Example

• Item 1
• Item 2
• Item 3
• Item 4

NOTE 在这个例子中，我们使用了 图标组件 中的 .uk-icon-bars 类名，来为手柄定义样式。

Markup

<ul class="uk-nestable" data-uk-nestable="{handleClass:'uk-nestable-handle'}">
    <li class="uk-nestable-item">
        <div class="uk-nestable-panel">
            <div class="uk-nestable-handle"></div>
            ...
        </div>
    </li>
</ul>

可嵌套拨动/Nestable toggle

默认地，整个可嵌套元素都能拖拽排序。要创建一个替换默认效果的手柄，需要添加 .uk-nestable-toggle 类名和 data-nestable-action="toggle" 属性到可嵌套面板内的 <div> 元素。

Example

• Item 1
• Item 2
• Item 3
• Item 4

Markup

<ul class="uk-nestable" data-uk-nestable">
    <li class="uk-nestable-item">
        <div class="uk-nestable-panel">
            <div class="uk-nestable-toggle" data-nestable-action="toggle"></div>
            ...
        </div>
    </li>
</ul>

多个列表的排序

要实现垮列表的排序，你可以为每个列表添加e data-uk-nestable="{group:'GROUP-NAME'}" 属性将他们归为一组。

Example

Markup

<ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul>
<ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul>

禁用嵌套

禁用列表条目的嵌套，你只需添加 data-uk-nestable="{maxDepth:1}" 属性。当然你还可以使用此属性来确定要嵌套的深度能有多大。

• Item 1
• Item 2
• Item 3
• Item 4

Markup

<ul class="uk-nestable" data-uk-nestable="{maxDepth:1}">...</ul>

JavaScript 选项

这是一个如何使用data属性来设置选项的例子:

data-uk-nestable="{maxDepth:0, group:'widgets'}"

手动初始化

var nestable = UIkit.nestable(element, { /* options */ });

Events