Сортируемый

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

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

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

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

Пример

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 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>

Сортируемый ручкой

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

Пример

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Примечание В этом примере мы использовали .uk-icon-bars класс Иконка компонент стиль ручки.

Разметки

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

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

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

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

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

Инициализации элементов вручную

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

События