This repo is a fork of Nestable by dbushell, who unfortunately cannot provide anymore support. The vast majority of pull requests from the original repository have been integrated here and tested in production.
I will continue the development of this fork according to my own needs or if I find bugs.
This being said, @RamonSmit has apparently taken the lead on an active dev branch of Nestable here.
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 */ });
The callback
provided as an option is fired when elements are reordered or nested.
$('.dd').nestable({
callback: function(l,e){
// l is the main container
// e is the element that was moved
}
});
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}]}]
You can change the follow options:
maxDepth
number of levels an item can be nested (default5
)group
group ID to allow dragging between lists (default0
)callback
callback function when an element has been changed (defaultnull
)
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'
)noDragClass
The class applied to an element to prevent dragging (default'dd-nodrag'
)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'
)noChildrenClass
The class applied to items that cannot have children (default'dd-nochildren'
)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.
- [tchapi] Add a "start-collapsed" behaviour based on vincenttheeten's idea exposed here : PR
- Elements that have the
collapsedClass
on loading will be collapsed automatically
- Elements that have the
- [tchapi] Merge a lots of branches from the different pull requests that were still waiting in the original repo :
- fix dd-handle on sub parents by mean-cj
- new
toArray()
function by Goktug - fixed bug for chrome, when there are multiple lists by andremtoy
- Fix for IE7 nd IE 8 by jasonruech
- [tchapi] Merge Craig Sansam' branch https://github.com/craigsansam/Nestable/ - Add the noChildrenClass option
- [tchapi] Replace previous
change
behaviour with a callback
- Merge fix from [jails] : Fix change event triggered twice.
- [dbushell] add no-drag class for handle contents
- [dbushell] use
el.closest
instead ofel.parents
- [dbushell] fix scroll offset on document.elementFromPoint()
- Merge for Zepto.js support
- Merge fix for remove/detach items
- Added
maxDepth
option (default to 5) - Added empty placeholder
- Updated CSS class structure with options for
listClass
anditemClass
. - 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
Contributors : Cyril http://tchap.me, Craig Sansam
Copyright © 2012-2013 David Bushell | BSD & MIT license