article:
Plugin: validationEngine
article:
Plugin: Nestable - Drag and Drop Hierarchical Lists

Plugin: nestedSortable

Advertisement

nestedSortable is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.


Usage

javascript code

    $(document).ready(function(){
        $('.sortable').nestedSortable({
            handle: 'div',
            items: 'li',
            toleranceElement: '> div'
        });
    });


html code

<ol class="sortable">
    <li><div>Some content</div></li>
    <li>
        <div>Some content</div>
        <ol>
            <li><div>Some sub-item content</div></li>
            <li><div>Some sub-item content</div></li>
        </ol>
    </li>
    <li><div>Some content</div></li>
</ol>

Plugin: nestedSortable



Note:

every <li> must have either one or two direct children, the first one being a container element (such as <div> in the above example), and the (optional) second one being the nested list. The container element has to be set as the 'toleranceElement' in the options, and this, or one of its children, as the 'handle'.

Also, the default list type is <ol>.



Features

- Designed to work seamlessly with the nested set model (have a look at the toArray method)
- Items can be sorted in their own list, moved across the tree, or nested under other items.
- Sublists are created and deleted on the fly
- All jQuery Sortable options, events and methods are available
- It is possible to define elements that will not accept a new nested item/list and a maximum depth for nested items
- The root level can be protected



Requirements

- jQuery 1.4+
- jQuery UI Sortable 1.8+



Browser Compatibility

Tested with: IE 6/7/8, Firefox 3.6/4, Chrome, Safari 3



License

This work is licensed under the MIT License.






source
demo
download

Advertisement
Tags: plugin, js, jquery, web, css, html, order, nested, sort, table, array, json, hierarchy

Leave a Comment

No Comment

© Creative3x Ltd.