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 addon.
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