可排序／Sortable

# 可排序／Sortable

<p class="uk-text-lead">创建可排序的网格和列表以重新排列元素的顺序。</p>

将一个元素拖放到可排序网格中的新位置，其他项目则根据情况自动调整。例如如果您想对图库或菜单项之类的项进行排序，那就太方便了。

***

## Usage-用法

要应用此组件，请将 `uk-sortable` 属性添加到容器并创建子元素。

```html
<div uk-sortable>
    <div></div>
    <div></div>
</div>
```

```example
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Item 2</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Item 3</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Item 4</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Item 5</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Item 6</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Item 7</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">Item 8</div>
    </li>
</ul>
```

***

## Handle-拖拽手柄

默认情况下，整个可排序元素可用于拖动排序。要创建一个专门用于拖拽的手柄，只需将 `handle: SELECTOR` 选项添加到属性中，并将手柄的class添加到要用作句柄的元素中。

```html
<ul uk-sortable="handle: .uk-sortable-handle">
    <li>
        <div class="uk-sortable-handle"></div>
        ...
    </li>
</ul>
```

```example
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" 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-small-right" 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-small-right" 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-small-right" 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-small-right" 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-small-right" 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-small-right" 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-small-right" 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-small-right" uk-icon="icon: table"></span>Item 8
        </div>
    </li>
</ul>
```

***

## Group-组

要能够将项目从一个列表拖拽排序到另一个列表，可以将 `group: GROUP-NAME` 选项添加到每个列表的 `uk-sortable` 属性中来对它们进行分组。

```html
<div uk-sortable="group: my-group">
    <div></div>
</div>

<div uk-sortable="group: my-group">
    <div></div>
</div>
```

```example
<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>
```

***

## Custom class-自定义class

还可以在拖动项的时候将一个或多个自定义class应用于这些项。为此，请将 `cls-custom: MY-CLASS` 选项添加到属性中。

```html
<ul uk-sortable="cls-custom: my-class">...</ul>
```

**注意** 在这个示例中，我们使用了 [Nav 组件](nav.md)中的导航。当拖动项目时，它将产生一个盒阴影（box-shadow） 和背景（background）。

```example
<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>
```

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项                | 可用值    | 默认值                       | 描述                         |
|:------------------|:-------|:--------------------------|:---------------------------|
| `group`           | String | `''`                      | 编组                         |
| `animation`       | String, Boolean | `slide`          | 动画模式: `slide`, `false`                     |
| `duration`        | Number | 250                       | 动画持续时间(单位为毫秒)           |
| `threshold`       | Number | `5`                       | 触发元素拖拽的鼠标移动像素距离的阈值         |
| `cls-item`        | String | `uk-sortable-item`        | 可拖拽元素的 class。              |
| `cls-placeholder` | String | `uk-sortable-placeholder` | 占位符的 class。                |
| `cls-drag`        | String | `uk-sortable-drag`        | ghost／克隆 class             |
| `cls-drag-state`  | String | `uk-drag`                 | The body 的拖拽 class. |
| `cls-base`        | String | `uk-sortable`             | 列表class                    |
| `cls-no-drag`     | String | `uk-sortable-nodrag`      | 使用此 class 禁用元素的拖拽          |
| `cls-empty`       | String | `uk-sortable-empty`       | 空列表 class                  |
| `cls-custom`      | String | `''`                      | ghost's custom／克隆自定义 class |
| `handle`          | String | `false`                   | 手柄选择器                      |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.sortable(element, options);
```

### 事件

将在附加了此组件的元素上触发以下事件：

| Name      | 描述       |
|:----------|:---------|
| `start`   | 拖动开始后触发  |
| `stop`    | 拖动停止后触发。 |
| `moved`   | 元素移动后触发。 |
| `added`   | 添加元素后触发。 |
| `removed` | 移除元素后触发。 |