Sortable
创建可拖拽排序的网格和列表，重新调整其中元素的顺序。
把元素拖放到可排序网格中的新位置，其他项目会自动调整位置。例如，当你需要对图库或菜单项这类条目进行排序时，这非常有用。
用法
要使用该组件，为一个容器添加 uk-sortable 属性，并创建子元素。
<div uk-sortable>
<div></div>
<div></div>
</div>-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
-
Item 6
-
Item 7
-
Item 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>-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
-
Item 6
-
Item 7
-
Item 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>分组
如果希望把一个列表中的条目拖到另一个列表中，可以为每个列表的 uk-sortable 属性添加 group: GROUP-NAME 选项，把它们归为一组。
<div uk-sortable="group: my-group">
<div></div>
</div>
<div uk-sortable="group: my-group">
<div></div>
</div>Group 1
Item 1
Item 2
Item 3
Item 4
Group 2
Item 1
Item 2
Item 3
Item 4
Empty Group
<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>注意 本示例使用了 Nav 组件 中的导航。拖动条目时，它会获得 box-shadow 和背景。
<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 |
String | 分组 | |
animation |
String, Boolean | slide |
动画模式（slide、false）。 |
duration |
Number | 150 |
动画时长，单位为毫秒。 |
threshold |
Number | 5 |
开始拖拽前的鼠标移动阈值。 |
cls-item |
String | uk-sortable-item |
条目类。 |
cls-placeholder |
String | uk-sortable-placeholder |
占位符类。 |
cls-drag |
String | uk-sortable-drag |
拖拽替身（ghost）类。 |
cls-drag-state |
String | uk-drag |
body 的拖拽状态类。 |
cls-base |
String | uk-sortable |
列表类。 |
cls-no-drag |
String | uk-sortable-nodrag |
禁用带有该类的元素上的拖拽。 |
cls-empty |
String | uk-sortable-empty |
空列表类。 |
cls-custom |
String | 拖拽替身的自定义类。 | |
handle |
String | false |
拖拽手柄选择器。 |
JavaScript
了解关于 JavaScript 组件的更多信息。
初始化
UIkit.sortable(element, options);事件
以下事件会在绑定了该组件的元素上触发：
| 名称 | 说明 |
|---|---|
start |
拖拽开始时触发。 |
stop |
拖拽停止时触发。 |
moved |
元素被移动后触发。 |
added |
元素被添加后触发。 |
removed |
元素被移除后触发。 |