Nestable

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**](http://dbushell.github.com/Nestable/) 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:

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 `'Expand>'`) * `collapseBtnHTML` The HTML text used to generate a list item collapse button (default `'Collapse'`) **Inspect the [Nestable Demo](http://dbushell.github.com/Nestable/) 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](http://dbushell.com/) [@dbushell](http://twitter.com/dbushell/) Copyright © 2012 David Bushell | BSD & MIT license