# 可排序/Sortable 创建可排序的网格和列表重新来排列元素的顺序。 拖拽元素到另一个可排序的网格中的某处，该网格中其它条目会自动适应排列顺序。这将会在诸如排列画廊条目或者菜单条目时显得尤为有用。 * * * ## 用法 要使用这个组件，需要在容器中添加 `.uk-sortable` 类，然后创建子元素来定义这个组件。为了使必要的JavaScript生效，还需要添加 `data-uk-sortable` 属性。注意 使用此组件需要额外添加 `sortable.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `sortable.js` 文件，在`js/components`文件夹中。 ### Example 在这里的例子中，我们使用到了 [网格组件](grid.html)来放置可排序的条目。  ### Markup ``` <ul class="uk-sortable" data-uk-sortable> <li>...</li> <li>...</li> </ul> ``` * * * ### 任意元素的排序 可排序组件并不限制只能用于 `&lt;ul&gt;` 元素。你可以使用任意块元素作为容器。 #### Markup ``` <div class="uk-sortable" data-uk-sortable> <div>...</div> <div>...</div> </div> ``` * * * ## 可排序手柄 默认地，整个可排序元素都可以拖拽进行排序。为了创建一个操作手柄，只需为希望作为手柄的元素添加 `{handleClass:'uk-sortable-handle'}` 选项到 data 属性，并添加手柄的class 类名。 ### Example  NOTE 在这个例子中，使用了 [图标组件](icon.html) 中的 `.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'}" ``` | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `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 | 改变可排序条目时触发 |