Сортируемый

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

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


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

Для установки этого компонента, добавить .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'}" атрибут для каждого списка.

Пример

Первый список

Item 1
Item 2
Item 3
Item 4

Второй список

Item 1
Item 2
Item 3
Item 4

Разметки

<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'}"
Вариант Возможное значение По умолчанию Описание
group string false Список группы
animation integer 150 Скорость анимации в мс
threshold integer 10 Движение мыши порога в пиксель до тех пор, пока триггер элемент перетаскивания
handleClass string '' Пользовательский класс, чтобы определить элементы, которые могут спровоцировать сортировки
dragCustomClass string '' Пользовательский класс добавлен перетаскиваемый элемент

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

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

События

Название Параметр Описание
start.uk.sortable event, sortable object, dragged element, ghost element На сортируемый начала перетаскивания
move.uk.sortable event, sortable object На сортировку переместить элемент
stop.uk.sortable event, sortable object, dragged element На сортируемый остановить перетаскивания
change.uk.sortable event, sortable object, dragged element, action На сортируемый изменить пункт