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, its items and the nestable panel.
| Class/Data attribute | Description |
|---|---|
.uk-nestable |
Add this class to a <ul> element to define the component. |
.uk-nestable-item |
Add this class to each <li> element the list item. |
.uk-nestable-panel |
Add this class to a <div> element inside the <li> element to style the item. |
NOTE To enable the necessary JavaScript, just add the data-uk-nestable attribute.
Example
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Markup
<ul class="uk-nestable" data-uk-nestable>
<li class="uk-nestable-item">
<div class="uk-nestable-panel"> ... </div>
</li>
</ul>Nestable handle
By default, the entire nestable element can be used for drag and drop sorting. To create a handle which will be used instead, just add the {handleClass:'uk-nestable-handle'} option to the data attribute and add the handle class to the element that you want to use as a handle.
Example
-
Item 1
-
Item 2
-
Item 3
-
Item 4
NOTE In this example we used the .uk-icon-bars class from the Icon component to style the handle.
Markup
<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>Nestable toggle
By default, the entire nestable element can be used for drag and drop sorting. To create a handle which will be used instead, just add the .uk-nestable-toggle class and the data-nestable-action="toggle" attribute to a <div> element inside the nestable panel.
Example
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Markup
<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>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.
Example
First list
-
Item 1
-
Item 2
-
Item 3
-
Item 4
Second list
-
Item 1
-
Item 2
-
Item 3
-
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
-
Item 4
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 |
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 |
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, sortable object, dragged element, action | On nestable change item |
