可排序/Sortable
最后更新于:2022-04-01 22:23:49
# 可排序/Sortable
创建可排序的网格和列表重新来排列元素的顺序。
拖拽元素到另一个可排序的网格中的某处,该网格中其它条目会自动适应排列顺序。这将会在诸如排列画廊条目或者菜单条目时显得尤为有用。
* * *
## 用法
要使用这个组件,需要在容器中添加 `.uk-sortable` 类,然后创建子元素来定义这个组件。为了使必要的JavaScript生效,还需要添加 `data-uk-sortable` 属性。注意 使用此组件需要额外添加 `sortable.css` 文件,在`css/components`文件夹中。此组件需要额外添加 `sortable.js` 文件,在`js/components`文件夹中。
### Example
在这里的例子中,我们使用到了 [网格组件](grid.html)来放置可排序的条目。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f413beb3.jpg)
### Markup
```
```
* * *
## 可排序手柄
默认地,整个可排序元素都可以拖拽进行排序。为了创建一个操作手柄,只需为希望作为手柄的元素添加 `{handleClass:'uk-sortable-handle'}` 选项到 data 属性,并添加手柄的class 类名。
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f414c91a.jpg)
NOTE 在这个例子中,使用了 [图标组件](icon.html) 中的 `.uk-icon-bars` 类名来设定手柄的样式。
### Markup
```
';
- ...
- ...
...
...
- ...
- ...
- ...