可排序

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

将一个元素拖放到可排序网格中的新位置，同时其他项目会调整以适应。如果您想对例如画廊或菜单项进行排序，这非常有用。

用法

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

<div uk-sortable>
    <div></div>
    <div></div>
</div>

- 项目 1
- 项目 2
- 项目 3
- 项目 4
- 项目 5
- 项目 6
- 项目 7
- 项目 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>

- 项目 1
- 项目 2
- 项目 3
- 项目 4
- 项目 5
- 项目 6
- 项目 7
- 项目 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-small-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-small-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-small-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-small-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-small-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-small-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-small-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-small-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>

组 1

项目 1

项目 2

项目 3

项目 4

组 2

项目 1

项目 2

项目 3

项目 4

空组

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

自定义类

您还可以将一个或多个自定义类应用于拖动时项目。

<ul uk-sortable="cls-custom: my-class">…</ul>

注意在此示例中，我们使用了导航组件中的导航。拖动项目时，它将获得一个阴影和背景。

- 活跃
- 项目
- 项目
- 项目
- 项目

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

组件选项

这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多

选项	值	默认值	描述
`组`	字符串		组
`动画`	字符串，布尔值	`滑动`	动画模式（`滑动`、`false`）。
`持续时间`	数字	`250`	动画持续时间（以毫秒为单位）。
`阈值`	数字	`5`	拖动开始前的鼠标移动阈值。
`cls-item`	字符串	`uk-sortable-item`	项目类。
`cls-placeholder`	字符串	`uk-sortable-placeholder`	占位符类。
`cls-drag`	字符串	`uk-sortable-drag`	幽灵类。
`cls-drag-state`	字符串	`uk-drag`	主体的拖动类。
`cls-base`	字符串	`uk-sortable`	列表的类。
`cls-no-drag`	字符串	`uk-sortable-nodrag`	禁用具有此类的元素上的拖动。
`cls-empty`	字符串	`uk-sortable-empty`	空列表类。
`cls-custom`	字符串		幽灵的自定义类。
`手柄`	字符串	`false`	手柄选择器。

JavaScript

了解更多关于 JavaScript 组件的信息。

初始化

UIkit.sortable(element, options);

事件

以下事件将在附带此组件的元素上触发

名称	描述
`开始`	拖动开始后触发。
`停止`	拖动停止后触发。
`已移动`	元素移动后触发。
`已添加`	元素添加后触发。
`已删除`	元素删除后触发。

文档

可排序

组 1

组 2

空组