Nestable
Create nestable lists that can be sorted by drag and drop.
The Nestable allows you to sort items through drag and drop. This is great, if you want to organize different categories or menu items in administration areas, for example.
Usage
A nestable list consists of the list itself and its items, a handle and a toggle.
Class/Data attribute | Description |
---|---|
.uk-nestable |
Add this class to a <ul> element to define the component. |
data-uk-nestable |
To enable the necessary JavaScript, just add this data attribute. |
.uk-nestable-item |
Add this class to a <div> element inside each list item. |
.uk-nestable-handle |
This class creates the handle to enable drag and drop sorting. |
data-nestable-action="toggle" |
This data attribute allows you to hide or show nested list items. |
Example
-
Item 1
-
Item 2
-
Item 3
Markup
<ul class="uk-nestable" data-uk-nestable>
<li>
<div class="uk-nestable-item">
<div class="uk-nestable-handle"></div>
<div data-nestable-action="toggle"></div>
...
</div>
</li>
</ul>
Sort multiple lists
To be able to sort items from one list to another, you can group them by adding the data-uk-nestable="{group:'GROUP-NAME'}"
attribute to each list. By default, lists without any group name are automatically in the same group.
Example
-
Item 1
-
Item 2
-
Item 3
Second list
-
Item 4
Markup
<ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul>
<ul class="uk-nestable" data-uk-nestable="{group:'my-group'}">...</ul>
Disable nesting
To disable nesting of list items, just add the data-uk-nestable="{maxDepth:1}"
attribute. You can also use this data attribute to determine to what depth nesting is possible.
-
Item 1
-
Item 2
-
Item 3
Markup
<ul class="uk-nestable" data-uk-nestable="{maxDepth:1}">...</ul>
JavaScript options
This is an example of how to set options via attribute:
data-uk-nestable="{maxDepth:0, group:'widgets'}"
Option | Possible value | Default | Description |
---|---|---|---|
group |
integer (0..6) | 0 | List group |
maxDepth |
integer | 10 | Max nesting level |
Init element manually
var nestable = UIkit.nestable(element, { /* options */ });
Events
Name | Parameter | Description |
---|---|---|
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, nestable item, action | On nestable change item |