Компонент Nestable

Создайте вложенные списки, которые можно сортировать путем перетаскивания - drag and drop.

Компонент «Nestable» позволяет сортировать элементы с помощью перетаскивания. Это замечательно, если вы хотите организовать различные категории или пункты меню, например, в областях администрирования.

Применение

Вложенный список состоит из самого списка, его элементов и вложенной панели.

Класс Описание
.uk-nestable Добавьте этот класс к элементу <ul>, чтобы определить компонент.
.uk-nestable-item Добавьте этот класс к каждому элементу <li> элемента списка.
.uk-nestable-panel Добавьте этот класс к элементу <div> внутри элемента <li>, чтобы стилизовать элемент.

Примечание Чтобы включить необходимый JavaScript, добавьте атрибут data-uk-nestable.

Пример

  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4

Разметка

<ul class="uk-nestable" data-uk-nestable>
    <li class="uk-nestable-item">
        <div class="uk-nestable-panel"> ... </div>
    </li>
</ul>

Nestable и Handle

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

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

Пример

  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4

Разметка

<ul class="uk-nestable" data-uk-nestable="{handleClass:'uk-nestable-handle'}">
    <li class="uk-nestable-item">
        <div class="uk-nestable-panel">
            <!-- Handle -->
            <i class="uk-nestable-handle uk-icon uk-icon-bars uk-margin-small-right"></i>
            
            <!-- Содержимое -->
            ...
        </div>
    </li>
</ul>

Nestable Toggle

По умолчанию вложенный элемент не имеет переключателя toggle для сворачивания и раскрытия внутрилежащих элементов. Чтобы создать toggle-переключатель, который будет использоваться для этого, добавьте класс .uk-nestable-toggle и атрибут data-nestable-action="toggle" к элементу <div> внутри вложенной панели.

Примечание Переместите панель в правую сторону, чтобы увидеть переключатель toggle.

Пример

  • Элемент Nestable Toggle 1
  • Элемент 2
  • Элемент 3
  • Элемент 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>

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

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

Пример

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

  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4

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

  • Пункт списка 1
  • Пункт списка 2
  • Пункт списка 3
  • Пункт списка 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}". Вы также можете использовать этот атрибут данных, чтобы определить, на какую глубину возможна вложенность.

  • Элемент 1 maxDepth:2
  • Элемент 2 maxDepth:2
  • Элемент 3 maxDepth:2
  • Элемент 4 maxDepth:2

Разметка

<ul class="uk-nestable" data-uk-nestable="{maxDepth:1}">...</ul>

Параметры JavaScript

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

data-uk-nestable="{maxDepth:0, group:'widgets'}"
Опция Значение По умолчанеию Описание
group string false List group
maxDepth integer 10 Max nesting level
threshold integer 20 Pixel threshold before starting to drag
listNodeName string ul List node name
itemNodeName string li Item node name
listBaseClass string uk-nestable List base class
listClass string uk-nestable-list List class
listitemClass string uk-nestable-list-item List item class
itemClass string uk-nestable-item Item class
dragClass string uk-nestable-list-dragged Class added to dragged list
movingClass string uk-nestable-moving Class added to <html> when moving
handleClass string uk-nestable-handle Class for drag handle
collapsedClass string uk-nestable-collapsed Class for collapsed items
placeClass string uk-nestable-placeholder Class for placeholder of currently dragged element
noDragClass string uk-nestable-nodrag Elements with this class will not trigger dragging. Useful when having the complete item draggable and not just the handle.
noChildrenClass string uk-nestable-nochildren Elements with this class will not allow children. Useful for bottom-level items.
emptyClass string uk-nestable-empty Class for empty lists

Запуск элемента вручную

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

События

Имя Параметр Описание
start.uk.nestable event, nestable object On nestable drag start
move.uk.nestable event, nestable object On nestable move item
stop.uk.nestable event, nestable object On nestable stop dragging
change.uk.nestable event, sortable object, dragged element, action On nestable change item