Сортируемый
Создать сортируемый сетки и списки, чтобы изменить порядок его элементов.
Перетащите элемент на новое место в пределах сортируемый грид, в то время как другие элементы изменяются в соответствии. Это здорово, если вы хотите сортировать элементы, как галерея или пунктов меню, например.
Использование
Для установки этого компонента, добавить .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'}"
Вариант | Возможное значение | По умолчанию | Описание |
---|---|---|---|
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 | На сортируемый изменить пункт |