可排序/Sortable

创建可排序的网格和列表重新来排列元素的顺序。

拖拽元素到另一个可排序的网格中的某处，该网格中其它条目会自动适应排列顺序。这将会在诸如排列画廊条目或者菜单条目时显得尤为有用。

用法

要使用这个组件，需要在容器中添加 .uk-sortable 类，然后创建子元素来定义这个组件。为了使必要的JavaScript生效，还需要添加 data-uk-sortable 属性。注意 使用此组件需要额外添加 sortable.css 文件，在css/components文件夹中。此组件需要额外添加 sortable.js 文件，在js/components文件夹中。

Example

在这里的例子中，我们使用到了 网格组件来放置可排序的条目。

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Markup

<ul class="uk-sortable" data-uk-sortable>
    <li>...</li>
    <li>...</li>
</ul>

任意元素的排序

可排序组件并不限制只能用于 <ul> 元素。你可以使用任意块元素作为容器。

Markup

<div class="uk-sortable" data-uk-sortable>
    <div>...</div>
    <div>...</div>
</div>

可排序手柄

默认地，整个可排序元素都可以拖拽进行排序。为了创建一个操作手柄，只需为希望作为手柄的元素添加 {handleClass:'uk-sortable-handle'} 选项到 data 属性，并添加手柄的class 类名。

Example

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

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

Markup

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

多个列表之间的排序

为了是跨列表的拖拽排序成为可能，你需要为每个列表添加 data-uk-sortable="{group:'GROUP-NAME'}" 属性，将它们归为一组。

Example

Markup

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

JavaScript 选项

这是一个关于如何通过data属性设置选项的例子：

data-uk-sortable="{animation:0, dragCustomClass:'dragging'}"

手动地初始化元素

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

Events