Question

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

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

用法

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

<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 属性，并添加手柄的class 类名。

<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'}"

选项	可用值	默认值	描述
group	string	false	列表的组
animation	integer	150	毫秒计时的动画
threshold	integer	10	触发元素拖拽的鼠标移动像素距离的阈值
handleClass	string	''	自定义类名，用于定义哪些元素可以触发排序
dragCustomClass	string	''	添加到被拖拽元素中的自定义类

手动地初始化元素

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

Events

Name	Parameter	Description
start.uk.sortable	event, sortable object, dragged element	可排序拖拽开始时触发
move.uk.sortable	event, sortable object	移动可排序条目时触发
stop.uk.sortable	event, sortable object, dragged element	拖拽终止时触发
change.uk.sortable	event, sortable object, dragged element, action	改变可排序条目时触发