UIkit3.x文档

可排序

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

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

用法

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

<div uk-sortable>
    <div></div>
    <div></div>
</div>
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
  • <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: SELECTOR选项添加到属性中，并将手柄的class添加到要用作句柄的元素中。

<ul uk-sortable="handle: .uk-sortable-handle">
    <li>
        <div class="uk-sortable-handle"></div>
        ...
    </li>
</ul>
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
  • <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-NAME选项添加到每个列表的 uk-sortable 属性中来对它们进行分组。

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

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

  • Group 1

    Item 1
    Item 2
    Item 3
    Item 4

    Group 2

    Item 1
    Item 2
    Item 3
    Item 4

    Empty Group

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

自定义class

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

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

Note 在这个示例中，我们使用了Nav 组件中的导航。当拖动项目时，它将产生一个盒阴影（box-shadow） 和背景（background）。

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

组件选项

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

Option Value Default Description
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 The ghost class.
cls-drag-state String uk-drag The body's dragging 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 '' Theghost的自定义class
handle String false 手柄选择器

JavaScript

了解更多关于JavaScript 组件的内容。

初始化

UIkit.sortable(element, options);

事件

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

Name Description
start 拖动开始后触发
stop 拖动停止后触发。
moved 元素移动后触发。
added 添加元素后触发。
removed 移除元素后触发。