# 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.
`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