可排序
创建可排序的网格和列表，以重新排列其元素的顺序。
将元素拖放到可排序网格中的新位置，而其他项目会调整以适应。例如，如果要对画廊或菜单项等项目进行排序，这将非常棒。
用法
要应用此组件，请将 uk-sortable 属性添加到容器并创建子元素。
<div uk-sortable>
<div></div>
<div></div>
</div>-
项目 1
-
项目 2
-
项目 3
-
项目 4
-
项目 5
-
项目 6
-
项目 7
-
项目 8
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s" uk-sortable="handle: .uk-card" uk-grid>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 1</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 2</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 3</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 4</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 5</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 6</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 7</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body uk-text-center">Item 8</div>
</li>
</ul>
手柄
默认情况下，整个可排序元素都可以用于拖放排序。要创建一个将要使用的手柄，只需将 handle: SELECTOR 选项添加到属性中，并将手柄类添加到要用作手柄的元素中。
<ul uk-sortable="handle: .uk-sortable-handle">
<li>
<div class="uk-sortable-handle"></div>
…
</li>
</ul>-
项目 1
-
项目 2
-
项目 3
-
项目 4
-
项目 5
-
项目 6
-
项目 7
-
项目 8
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 1
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 2
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 3
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 4
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 5
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 6
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 7
</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-xsmall-right uk-text-center" uk-icon="icon: table"></span>Item 8
</div>
</li>
</ul>分组
为了能够将项目从一个列表排序到另一个列表，您可以通过将 group: GROUP-NAME 选项添加到每个列表的 uk-sortable 属性中来对它们进行分组。
<div uk-sortable="group: my-group">
<div></div>
</div>
<div uk-sortable="group: my-group">
<div></div>
</div>分组 1
项目 1
项目 2
项目 3
项目 4
分组 2
项目 1
项目 2
项目 3
项目 4
空分组
<div class="uk-child-width-1-3@s" uk-grid>
<div>
<h4>Group 1</h4>
<div uk-sortable="group: sortable-group">
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div>
</div>
</div>
</div>
<div>
<h4>Group 2</h4>
<div uk-sortable="group: sortable-group">
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div>
</div>
</div>
</div>
<div>
<h4>Empty Group</h4>
<div uk-sortable="group: sortable-group"></div>
</div>
</div>自定义类
您还可以将一个或多个自定义类应用于正在拖动的项目。为此，请将 cls-custom: MY-CLASS 选项添加到属性中。
<ul uk-sortable="cls-custom: my-class">…</ul>注意 在此示例中，我们使用的是 导航组件 中的导航。拖动项目时，它将获得阴影和背景。
<ul class="uk-nav uk-nav-default uk-width-medium" uk-sortable="cls-custom: uk-box-shadow-small uk-flex uk-flex-middle uk-background">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>组件选项
可以将任何这些选项应用于组件属性。用分号分隔多个选项。 了解更多
| 选项 | 值 | 默认值 | 描述 |
|---|---|---|---|
group |
字符串 | 组 | |
animation |
字符串, 布尔值 | slide |
动画模式 (slide, false)。 |
duration |
数字 | 250 |
动画持续时间，以毫秒为单位。 |
threshold |
数字 | 5 |
鼠标移动阈值，拖动开始之前。 |
cls-item |
字符串 | uk-sortable-item |
项目类。 |
cls-placeholder |
字符串 | uk-sortable-placeholder |
占位符类。 |
cls-drag |
字符串 | uk-sortable-drag |
幽灵类。 |
cls-drag-state |
字符串 | uk-drag |
主体的拖动类。 |
cls-base |
字符串 | uk-sortable |
列表的类。 |
cls-no-drag |
字符串 | uk-sortable-nodrag |
禁用具有此类的元素上的拖动。 |
cls-empty |
字符串 | uk-sortable-empty |
空列表类。 |
cls-custom |
字符串 | 幽灵的自定义类。 | |
handle |
字符串 | false |
手柄选择器。 |
JavaScript
了解有关 JavaScript 组件 的更多信息。
初始化
UIkit.sortable(element, options);事件
以下事件将在附加了此组件的元素上触发
| 名称 | 描述 |
|---|---|
start |
拖动开始后触发。 |
stop |
拖动停止后触发。 |
moved |
移动元素后触发。 |
added |
添加元素后触发。 |
removed |
删除元素后触发。 |