jquery-ui-nested is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.
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)
toArray method)
- Some content
-
Some content
- Some sub-item content
- Some sub-item content
- Some content
`
`
$(document).ready(function(){
$('.sortable').nestedSortable({
handle: 'div',
listType: "ol",
items: 'li',
toleranceElement: '> div'
});
});
`
Please note: every must have either one or two direct children, the first one being a container element (such as 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 .
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
- disableParentChange (2.0)
- Set this to true to lock the parentship of items. They can only be re-ordered within theire current parent container.
- doNotClear (2.0)
- Set this to true if you don't want empty lists to be removed. Default: false
- expandOnHover (2.0)
- How long (in ms) to wait before expanding a collapsed node (useful only if
isTree: true). Default: 700
- isAllowed (function)
- You can specify a custom function to verify if a drop location is allowed. Default: function (placeholder, placeholderParent, currentItem) { return true; }
- isTree (2.0)
- Set this to true if you want to use the new tree functionality. Default: false
- listType
- The list type used (ordered or unordered). Default: ol
- maxLevels
- The maximum depth of nested items the list can accept. If set to '0' the levels are unlimited. Default: 0
- protectRoot
- Whether to protect the root level (i.e. root items can be sorted but not nested, sub-items cannot become root items). Default: false
- rootID
- The id given to the root element (set this to whatever suits your data structure). Default: null
- rtl
- Set this to true if you have a right-to-left page. Default: false
- startCollapsed (2.0)
- Set this to true if you want the plugin to collapse the tree on page load. Default: false
- tabSize
- How far right or left (in pixels) the item has to travel in order to be nested or to be sent outside its current list. Default: 20
- excludeRoot
- Exlude the root item from the
toArray output
Custom Classes (you will set them in the options as well)
- branchClass (2.0)
- Given to all items that have children. Default: mjs-nestedSortable-branch
- collapsedClass (2.0)
- Given to branches that are collapsed. It will be switched to expandedClass when hovering for more then expandOnHover ms. Default: mjs-nestedSortable-collapsed
- disableNestingClass
- Given to items that will not accept children. Default: mjs-nestedSortable-no-nesting
- errorClass
- Given to the placeholder in case of error. Default: mjs-nestedSortable-error
- expandedClass (2.0)
- Given to branches that are expanded. Default: mjs-nestedSortable-expanded
- hoveringClass (2.0)
- Given to collapsed branches when dragging an item over them. Default: mjs-nestedSortable-hovering
- leafClass (2.0)
-
- Given to items that do not have children. Default: mjs-nestedSortable-leaf
- disabledClass (2.0)
-
- Given to items that should be skipped when sorting over them. For example, non-visible items that are still part of the list. Default: mjs-nestedSortable-disabled
Custom Methods
- serialize
- Serializes the nested list into a string like setName[item1Id]=parentId&setName[item2Id]=parentId, reading from each item's id formatted as 'setName_itemId' (where itemId is a number).
It accepts the same options as the original Sortable method (key, attribute and expression).
- toArray
- Builds an array where each element is in the form:
setName[n] =>
{
'item_id': itemId,
'parent_id': parentId,
'depth': depth,
'left': left,
'right': right,
}
It accepts the same options as the original Sortable method (attribute and expression) plus the custom startDepthCount, that sets the starting depth number (default is 0).
- toHierarchy
- Builds a hierarchical object in the form:
'0' ...
'id' => itemId
'1' ...
'id' => itemId
'children' ...
'0' ...
'id' => itemId
'1' ...
'id' => itemId
'2' ...
'id' => itemId
Similarly to toArray, it accepts attribute and expression options.
Optionally adding
data- attributes will cause them to show up in the hierarchy. See demo for example.
Events
- change
- Fires when the item is dragged to a new location. This triggers for each location it is dragged into not just the ending location.
- sort
- Fires when the item is dragged.
- revert
- Fires once the object has moved if the new location is invalid.
- relocate
- Only fires once when the item is done bing moved at its final location.
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).