|

#### Theme Styles

#### Theme Colors

#### Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend et nisl eget porta. Curabitur elementum sem molestie nisl varius, eget tempus odio molestie. Nunc vehicula sem arcu, eu pulvinar neque cursus ac. Aliquam ultricies lobortis magna et aliquam. Vestibulum egestas eu urna sed ultricies. Nullam pulvinar dolor vitae quam dictum condimentum. Integer a sodales elit, eu pulvinar leo. Nunc nec aliquam nisi, a mollis neque. Ut vel felis quis tellus hendrerit placerat. Vivamus vel nisl non magna feugiat dignissim sed ut nibh. Nulla elementum, est a pretium hendrerit, arcu risus luctus augue, mattis aliquet orci ligula eget massa. Sed ut ultricies felis.

## Chat 3

Favorites Verna Morton2Delores Blake0Nathaniel Morris0Boyd Bridges0Meredith Houston0
Office Ann Scott0Sherman Stokes0Florence Pierce1
Friends Willard Mckenzie0Jenny Frazier0Chris Stewart0Olivia Green0
Willard MckenzieOnline

- John Doe09:33

  Hi Swlabs, we have some comments for you.

- Swlabs09:33

  Hi, we're listening you...

# Nestable

## PLEASE NOTE

I cannot provide any support or guidance beyond this README. If this code helps you that's great but I have no plans to develop Nestable beyond this demo (it's not a final product and has limited functionality). I cannot reply to any requests for help.

### Drag & drop hierarchical list with mouse and touch compatibility (jQuery / Zepto plugin)

Try Nestable Demo

Nestable is an experimental example and not under active development. If it suits your requirements feel free to expand upon it!

## Usage

Write your nested HTML lists like so:

    <div class="dd">
        <ol class="dd-list">
            <li class="dd-item" data-id="1">
                <div class="dd-handle">Item 1</div>
            </li>
            <li class="dd-item" data-id="2">
                <div class="dd-handle">Item 2</div>
            </li>
            <li class="dd-item" data-id="3">
                <div class="dd-handle">Item 3</div>
                <ol class="dd-list">
                    <li class="dd-item" data-id="4">
                        <div class="dd-handle">Item 4</div>
                    </li>
                    <li class="dd-item" data-id="5">
                        <div class="dd-handle">Item 5</div>
                    </li>
                </ol>
            </li>
        </ol>
    </div>

Then activate with jQuery like so:

    $('.dd').nestable({ /* config options */ });

### Events

The `change` event is fired when items are reordered.

    $('.dd').on('change', function() {
        /* on change event */
    });

### Methods

You can get a serialised object with all `data-*` attributes for each item.

    $('.dd').nestable('serialize');

The serialised JSON for the example above would be:

    [{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]

### Configuration

You can change the follow options:

- `maxDepth` number of levels an item can be nested (default `5`)
- `group` group ID to allow dragging between lists (default `0`)

These advanced config options are also available:

- `listNodeName` The HTML element to create for lists (default `'ol'`)
- `itemNodeName` The HTML element to create for list items (default `'li'`)
- `rootClass` The class of the root element `.nestable()` was used on (default `'dd'`)
- `listClass` The class of all list elements (default `'dd-list'`)
- `itemClass` The class of all list item elements (default `'dd-item'`)
- `dragClass` The class applied to the list element that is being dragged (default `'dd-dragel'`)
- `handleClass` The class of the content element inside each list item (default `'dd-handle'`)
- `collapsedClass` The class applied to lists that have been collapsed (default `'dd-collapsed'`)
- `placeClass` The class of the placeholder element (default `'dd-placeholder'`)
- `emptyClass` The class used for empty list placeholder elements (default `'dd-empty'`)
- `expandBtnHTML` The HTML text used to generate a list item expand button (default `'<button data-action="expand">Expand></button>'`)
- `collapseBtnHTML` The HTML text used to generate a list item collapse button (default `'<button data-action="collapse">Collapse</button>'`)

Inspect the Nestable Demo for guidance.

## Change Log

### 15th October 2012

- Merge for Zepto.js support
- Merge fix for remove/detach items

### 27th June 2012

- Added `maxDepth` option (default to 5)
- Added empty placeholder
- Updated CSS class structure with options for `listClass` and `itemClass`.
- Fixed to allow drag and drop between multiple Nestable instances (off by default).
- Added `group` option to enabled the above.

Author: David Bushell http://dbushell.com @dbushell

Copyright © 2012 David Bushell | BSD & MIT license