可嵌套/Nestable

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

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


用法

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

class和data属性 描述
.uk-nestable 添加此类名到 <ul> 元素,定义可嵌套组件。
.uk-nestable-item 添加此类名到列表的每一个 <li> 元素。
.uk-nestable-panel 添加此类名到 <li> 元素内部的 <div> 元素,给条目设定样式。

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

Example

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

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" 属性到可嵌套面板内的 &lt;div&gt; 元素。

Example

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}" 属性。当然你还可以使用此属性来确定要嵌套的深度能有多大。

Markup

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

JavaScript 选项

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

data-uk-nestable="{maxDepth:0, group:'widgets'}"
选项 可用值 默认值 描述
group string false 列表组
maxDepth integer 10 最大嵌套层数
threshold integer 20 以px为单位,开始拖拽的阈值。
listNodeName string ul 列表节点名称
itemNodeName string li 条目节点名称
listBaseClass string uk-nestable 列表的基本类名
listClass string uk-nestable-list 列表的类名
listitemClass string uk-nestable-list-item 列表条目的类名
itemClass string uk-nestable-item 条目类名
dragClass string uk-nestable-list-dragged 添加到被拖拽列表的类名
movingClass string uk-nestable-moving 拖动时添加到 &lt;html&gt; 元素的类名
handleClass string uk-nestable-handle 拖拽手柄的类名
collapsedClass string uk-nestable-collapsed 被收缩的条目的类名
placeClass string uk-nestable-placeholder 当前被拖拽元素的占位符类名
noDragClass string uk-nestable-nodrag 带有此类名的元素不会触发拖拽。Elements with this class will not trigger dragging. Useful when having the complete item draggable and not just the handle.
noChildrenClass string uk-nestable-nochildren 带有此class的元素不再有子级元素。这对于最低层级的条目很有用。
emptyClass string uk-nestable-empty 空列表的类名

手动初始化

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

Events

名称 参数 描述
start.uk.nestable event, nestable object 拖拽开始时触发
move.uk.nestable event, nestable object 移动可嵌套条目时触发
stop.uk.nestable event, nestable object 拖拽终止时触发
change.uk.nestable event, nestable item, action 改变可嵌套条目时触发