可嵌套

创建可通过拖放排序的可嵌套列表。

可嵌套组件允许您通过拖放来排序项目。如果您想在管理区域中组织不同的类别或菜单项，这将非常有用。

用法

一个可嵌套列表由列表本身、列表项和可嵌套面板组成。

注意要启用必要的 JavaScript，只需添加 data-uk-nestable 属性。

示例

• 项目 1
• 项目 2
• 项目 3
• 项目 4

标记

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

可嵌套句柄

默认情况下，整个可嵌套元素可以用于拖放排序。要创建一个句柄来代替，只需将 {handleClass:'uk-nestable-handle'} 选项添加到数据属性，并将句柄类添加到您想要用作句柄的元素。

示例

• 项目 1
• 项目 2
• 项目 3
• 项目 4

注意 在此示例中，我们使用了 图标组件中的 .uk-icon-bars 类来设置句柄样式。

标记

<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>

可嵌套切换

默认情况下，整个可嵌套元素可以用于拖放排序。要创建一个句柄来代替，只需将 .uk-nestable-toggle 类和 data-nestable-action="toggle" 属性添加到可嵌套面板内的 <div> 元素。

示例

• 项目 1
• 项目 2
• 项目 3
• 项目 4

标记

<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>

多个列表

要能够将项目从一个列表排序到另一个列表，您可以通过将 data-uk-nestable="{group:'GROUP-NAME'}" 属性添加到每个列表来对它们进行分组。

示例

标记

<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}" 属性。您也可以使用此数据属性来确定可能嵌套的深度。

• 项目 1
• 项目 2
• 项目 3
• 项目 4

标记

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

JavaScript 选项

这是一个如何通过属性设置选项的示例

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

手动初始化元素

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

事件