可排序

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

将一个元素拖放到可排序网格中的新位置，而其他项目会调整以适应。 如果要对图库或菜单项之类的项目进行排序，这将非常有用。

用法

要应用此组件，请将 .uk-sortable 类添加到容器，并创建子元素来定义组件。 要启用必要的 JavaScript，只需添加 data-uk-sortable 属性即可。

示例

在此示例中，我们使用了网格组件中的网格来排列可排序的项目。

• 项目 1
• 项目 2
• 项目 3
• 项目 4
• 项目 5
• 项目 6
• 项目 7
• 项目 8
• 项目 9
• 项目 10

标记

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

对任何元素进行排序

可排序组件不限于 <ul> 元素。 您可以使用任何块元素作为容器。

标记

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

可排序句柄

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

示例

• 项目 1
• 项目 2
• 项目 3
• 项目 4
• 项目 5
• 项目 6
• 项目 7
• 项目 8
• 项目 9
• 项目 10

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

标记

<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'}" 属性添加到每个列表来对它们进行分组。

示例

标记

<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 */ });

事件