Сортируемые элементы : Sortable

• Сортируемые элементы
• Сортировка любого элемента
• Сортируемая рука Handle
• Сортировка списков
• JavaScript Options

Перетащите элемент ^{(*Drag and drop)} в новое место в сортируемой грид-сетке, в то время как другие элементы подгоняются под размер. Это замечательно, например, если вы хотите отсортировать такие элементы, как галерея или пункты меню.

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

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

Пример

В этом примере использовалась сетка из компонента Grid, чтобы упорядочить сортируемые элементы.

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

<ul class="uk-sortable" data-uk-sortable>
    <li>...</li>
    <li>...</li>
</ul>

Сортировка любого элемента

Сортируемый компонент не ограничен элементами <ul>. Вы можете использовать любой элемент блока в качестве контейнера.

<div class="uk-sortable" data-uk-sortable>
    <div>...</div>
    <div>...</div>
</div>

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

По умолчанию весь сортируемый элемент может использоваться для сортировки с помощью перетаскивания. Чтобы создать handle, которая будет использоваться вместо этого, добавьте параметр {handleClass:'uk-sortable-handle'} в атрибут данных и добавьте класс handle к элементу, который вы хотите использовать в качестве handle.

Пример

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

Примечание В примере использован класс .uk-icon-bars из компонента Icon для стилизации handle.

<ul class="uk-sortable" data-uk-sortable="{handleClass:'uk-sortable-handle'}">
    <li>
        <div class="uk-sortable-handle"></div>
        ...
    </li>
</ul>

Sortable - Несколько списков

Чтобы иметь возможность сортировать элементы из одного списка в другой, вы можете сгруппировать их, добавив атрибут data-uk-sortable="{group:'GROUP-NAME'}" в каждый список.

Пример

<ul class="uk-sortable" data-uk-sortable="{group:'my-group'}">...</ul>
<ul class="uk-sortable" data-uk-sortable="{group:'my-group'}">...</ul>

JavaScript options

Это пример того, как установить параметры через атрибут данных:

data-uk-sortable="{animation:0, dragCustomClass:'dragging'}"

Init element manually

var sortable = UIkit.sortable(element, { /* options */ });

Events