Компонент Сортируемые элементы

Создавайте сортируемые grid-сетки и списки, с возможностью изменить порядок их элементов.

Перетаскивайте элемент (drag and drop) в новое место в сортируемой grid-сетке, в то время как другие элементы самостоятельно приспосабливаются, чтобы соответствовать. Это прекрасно, когда вы хотите отсортировать такие элементы, как, например, галерея или пункты меню.


Sortable. Использование

Чтобы применить компонент Сортируемые элементы, добавьте атрибут uk-sortable в контейнер и создайте дочерние элементы.

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

<!-- или списком -->
<ul uk-sortable>
    <li></li>
    <li></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-text-center" uk-sortable="handle: .uk-card" uk-grid>
        <li>
            <div class="uk-card uk-card-default uk-card-body">Элемент 1</div>
        </li>
        <li>
            <div class="uk-card uk-card-default uk-card-body">Блок 2</div>
        </li>
        <li>
            <div class="uk-card uk-card-default uk-card-body">Впрочем 3</div>
        </li>
        <li>
            <div class="uk-card uk-card-default uk-card-body">Условия 4</div>
        </li>
        <li>
            <div class="uk-card uk-card-default uk-card-body">Считаем 5</div>
        </li>
        <li>
            <div class="uk-card uk-card-default uk-card-body">Поэтому 6</div>
        </li>
        <li>
            <div class="uk-card uk-card-default uk-card-body">Укажем 7</div>
        </li>
        <li>
            <div class="uk-card uk-card-default uk-card-body">В общем 8</div>
        </li>
    </ul>

Сортируемая рука Handle

По умолчанию весь сортируемый элемент может использоваться для сортировки с помощью перетаскивания. Чтобы создать Handle, точку, которая будет использоваться вместо этого, добавьте опцию handle: SELECTOR в атрибут и добавьте соответствующий класс к элементу, который вы хотите использовать в качестве Handle.

<ul uk-sortable="handle: .uk-sortable-handle">
    <li>
        <div class="uk-sortable-handle"></div>
        ...
    </li>
</ul>
    • Handle 01
    • Точка 02
    • Handle 03
    • Точка 04
    • Handle 05
    • Handle 06
    • Handle 07
    • Handle 08
  • <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>Handle 01
            </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>Точка 02
            </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>Handle 03
            </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>Точка 04
            </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>Handle 05
            </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>Handle 06
            </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>Handle 07
            </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>Handle 08
            </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>
  • Группа 1

    Элемент 1
    Элемент 2
    Элемент 3
    Элемент 4

    Группа 2

    Блок 1
    Блок 2
    Блок 3
    Блок 4

    Пустая группа

  • <div class="uk-child-width-1-3@s" uk-grid>
        <div>
            <h4>Группа 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">Элемент 1</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-card uk-card-default uk-card-body uk-card-small">Элемент 2</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-card uk-card-default uk-card-body uk-card-small">Элемент 3</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-card uk-card-default uk-card-body uk-card-small">Элемент 4</div>
                </div>
            </div>
        </div>
        <div>
            <h4>Группа 2</h4>
            <div uk-sortable="group: sortable-group">
                <div class="uk-margin">
                    <div class="uk-card uk-card-primary uk-card-body uk-card-small">Блок 1</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-card uk-card-primary uk-card-body uk-card-small">Блок 2</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-card uk-card-primary uk-card-body uk-card-small">Блок 3</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-card uk-card-primary uk-card-body uk-card-small">Блок 4</div>
                </div>
            </div>
        </div>
        <div>
            <h4>Пустая группа</h4>
            <div uk-sortable="group: sortable-group"></div>
        </div>
    </div>

Пользовательский класс

Вы также можете применить один или несколько пользовательских классов к элементам, в тот момент, когда они перетаскиваются. Для этого добавьте к атрибуту опцию cls-custom: MY-CLASS.

<ul uk-sortable="cls-custom: my-class">...</ul>
Примечание В этом примере используется навигация из компонента Навигация списком. При перетаскивании элемент получит box-shadow и background.

Опции компонента

При использовании компонента Сортируемые элементы к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
group String '' Группа.
animation Number 150 Продолжительность анимации.
threshold Number 10 Mouse move threshold before dragging starts.
cls-item String uk-sortable-item The item class.
cls-placeholder String uk-sortable-placeholder The placeholder class.
cls-drag String uk-sortable-drag The ghost class.
cls-drag-state String uk-sortable-dragging The body's dragging class.
cls-base String uk-sortable The list's class.
cls-no-drag String uk-sortable-nodrag Disable dragging on elements with this class.
cls-empty String uk-sortable-empty The empty list class.
cls-custom String '' The ghost's custom class.
handle String false The handle selector.

JavaScript

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

Инициализация

UIkit.sortable(element, options);

События

Следующие события будут инициированы для элементов компонента:

Название Описание
start Запускается после начала перетаскивания.
stop Запускается после остановки перетаскивания.
moved Срабатывает после того, как элемент был перемещен.
added Запускается после добавления элемента.
removed Срабатывает после того, как элемент был удален.
Документация
Компоненты