Вкладные
Создать вложенными списками, которые можно сортировать перетаскиванием.
На Вкладные позволяет сортировать элементы с помощью перетаскивания. Это здорово, если вы хотите организовать разных категорий или пунктов меню в административной областях, например.
Использование
На вкладные список содержит сам список, его элементы и вкладные панели.
| Класс/атрибут данных | Описание |
|---|---|
.uk-nestable |
Добавьте этот класс к <ul> элемент для определения компонента. |
.uk-nestable-item |
Добавить этот класс, чтобы каждый <li> элемент списка элемент. |
.uk-nestable-panel |
Добавьте этот класс к <div> элемент внутрь <li> элемент стиля элемента. |
Примечание для включения необходимо JavaScript, просто добавьте data-uk-nestable атрибут.
Пример
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Разметки
<ul class="uk-nestable" data-uk-nestable>
<li class="uk-nestable-item">
<div class="uk-nestable-panel"> ... </div>
</li>
</ul>Вкладные ручки
По умолчанию вся вкладные элемент может использоваться для перетаскивания. Чтобы создать ручку, которая будет использоваться вместо этого, просто добавьте {handleClass:'uk-nestable-handle'} опция для данных атрибутов и добавить ручка класс к элементу, который вы хотите использовать в качестве ручки.
Пример
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Примечание В этом примере мы использовали .uk-icon-bars класс Иконка компонент стиль ручки.
Разметки
<ul class="uk-nestable" data-uk-nestable="{handleClass:'uk-nestable-handle'}">
<li class="uk-nestable-item">
<div class="uk-nestable-panel">
<div class="uk-nestable-handle"></div>
...
</div>
</li>
</ul>Вкладные переключения
По умолчанию вся вкладные элемент может использоваться для перетаскивания. Чтобы создать ручку, которая будет использоваться вместо этого, просто добавьте .uk-nestable-toggle класс и data-nestable-action="toggle" атрибут <div> элемент внутри панели вставляются друг в друга.
Пример
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Разметки
<ul class="uk-nestable" data-uk-nestable">
<li class="uk-nestable-item">
<div class="uk-nestable-panel">
<div class="uk-nestable-toggle" data-nestable-action="toggle"></div>
...
</div>
</li>
</ul>Несколько списков
Уметь сортировать элементы из одного списка в другой, вы можете сгруппировать их, добавив data-uk-nestable="{group:'GROUP-NAME'}" атрибут для каждого списка.
Пример
Первый список
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Второй список
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Разметки
<ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul>
<ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul>Отключения вложенности
Чтобы отключить вложенность элементов списка, просто добавьте data-uk-nestable="{maxDepth:1}" атрибут. Вы можете также использовать эти данные в атрибут, чтобы определить, на какой глубине вложенности можно.
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Разметки
<ul class="uk-nestable" data-uk-nestable="{maxDepth:1}">...</ul>JavaScript варианты
Это пример того, как устанавливать параметры через атрибут:
data-uk-nestable="{maxDepth:0, group:'widgets'}"| Вариант | Возможное значение | По умолчанию | Описание |
|---|---|---|---|
group |
string | false | Список группы |
maxDepth |
integer | 10 | Максимальный уровень вложенности |
threshold |
integer | 20 | Пиксель порога, прежде чем начать перетаскивание |
listNodeName |
string | ul | Список имя узла |
itemNodeName |
string | li | Пункт имя узла |
listBaseClass |
string | uk-nestable | Список базового класса |
listClass |
string | uk-nestable-list | Список класса |
listitemClass |
string | uk-nestable-list-item | Элемент списка класса |
itemClass |
string | uk-nestable-item | Предмет класс |
dragClass |
string | uk-nestable-list-dragged | Класс добавил в список тащили |
movingClass |
string | uk-nestable-moving | Класс добавил в <html> при перемещении |
handleClass |
string | uk-nestable-handle | Класс за ручку |
collapsedClass |
string | uk-nestable-collapsed | Класс рухнул элементов |
placeClass |
string | uk-nestable-placeholder | Класс для заполнителя в настоящее время перетаскивать элемент |
noDragClass |
string | uk-nestable-nodrag | Элементы с этим классом не инициирует перетаскивание. Полезно, когда имея полный элемент перетаскиваемым и не просто ручка. |
noChildrenClass |
string | uk-nestable-nochildren | Элементы с этим классом не позволит детям. Полезно для нижнего уровня элементы. |
emptyClass |
string | uk-nestable-empty | Класс для пустых списков |
Инициализации элементов вручную
var nestable = UIkit.nestable(element, { /* options */ });События
| Название | Параметр | Описание |
|---|---|---|
start.uk.nestable |
event, nestable object | На вкладные начала перетаскивания |
move.uk.nestable |
event, nestable object | На вкладные переместить элемент |
stop.uk.nestable |
event, nestable object | На вкладные остановить перетаскивания |
change.uk.nestable |
event, sortable object, dragged element, action | На вкладные изменить пункт |
