jquery-ui-nested
v1.3.6
Published
jquery-ui-nested is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.
Downloads
13
Readme
jquery-ui-nested jQuery plugin
jquery-ui-nested is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.
Installation
npm install jquery-ui-nested --save
What's new in version 2.0
The biggest change is that your nested list can now behave as a tree with expand/collapse funcionality. Simply set isTree
to true in the options and you are good to go! Check the demo out to see what can be done with jquery-ui-nested and a little CSS. (Note that all jquery-ui-nested does is to assign/remove classes on the fly)
Also:
- isAllowed function finally works as expected, see the docs below
- Fixed: a small bug in the protectRoot function
- Changed: no drop zone will appear at all if you try to nest an item under another one that has the no-nesting class.
- Added: doNotClear option to prevent the plugin from deleting empty lists
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
- The parentship of items can be locked, just as if it was a family tree.
Usage
<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>
$(document).ready(function(){
$('.sortable').nestedSortable({
handle: 'div',
listType: "ol",
items: 'li',
toleranceElement: '> div'
});
});
Please 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>
.
This is the bare minimum to have a working jquery-ui-nested. Check the demo out to see what can be accomplished with a little more.
Custom Options
Custom Classes (you will set them in the options as well)
Custom Methods
Events
Known Bugs
jquery-ui-nested doesn't work properly with connected draggables, because of the way Draggable simulates Sortable mouseStart
and mouseStop
events. This bug might or might not be fixed some time in the future (it's not specific to this plugin).
Requirements
jQuery UI Sortable 1.10+ (might work with 1.9, but not tested)
Browser Compatibility
Tested with: Firefox, Chrome
NOTE: This is still an alpha version, please test thoroughly in whichever version of IE you target
License
This work is licensed under the MIT License.
Which means you can do pretty much whatever you want with it.