Сортировка

Создавайте сортируемые сетки и списки, чтобы изменять порядок в них.

Перетащите элемент в новое место в сортируемой сетке, в то время как другие элементы подгонятся под новый размер. Это нужно в случае, если вы хотите отсортировать такие элементы, как, например, галерея или пункты меню.

Drug and drop позволяет манипулировать элементами интерфейса, создавая подобие перемещения элементов в операционных системах. Так, например, реализован функционал перемещения аудиозаписей в социальных сетях.

Как использовать

Для начала работы с компонентом добавьте атрибут 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-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 к атрибуту и добавьте класс дескриптора к элементу, который вы хотите использовать в качестве активного.

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

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

    Group 2

    Элемент 1
    Элемент 2
    Элемент 3
    Элемент 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>

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

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

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

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

Любой из этих параметров может быть применен к атрибуту компонента. Отделяйте параметры друг от друга точкой с запятой. Подробнее о параметрах

Опция Значение По умолчанию Описание
group String '' Группа
animation Number 150 Длительность анимации.
threshold Number 10 Порог перемещения мыши перед началом перетаскивания.
cls-item String uk-sortable-item Класс элемента.
cls-placeholder String uk-sortable-placeholder Класс плейсхолдера.
cls-drag String uk-sortable-drag Класс перетаскивателя.
cls-drag-state String uk-sortable-dragging Класс тела перетаскивателя.
cls-base String uk-sortable Класс списка.
cls-no-drag String uk-sortable-nodrag Отключить перетаскивание элементов с этим классом.
cls-empty String uk-sortable-empty Класс пустого списка.
cls-custom String '' Пользовательский класс перетаскивателя.
handle String false Селектор символа перетаскивателя.

JavaScript

Подробнее о JavaScript компонентах.

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

UIkit.sortable(element, options);

События

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

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