nestedSortable jQuery Plugin

Download full package (jQuery, jQuery UI, nestedSortable and demo page): nestedSortable.1.2.1.zip
View the source code: jquery.ui.nestedSortable.js

If you want to talk about this plugin, or you have anything to tell me, please refer to this post in the jQuery forum.
This plugin has also its place in the jQuery Plugin Repository, which can be used for version and issue tracking.

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.
All jQuery Sortable options, events and methods are available.
It is possible to define elements that will not accept a new nested list (no-nesting in the above list).

Usage:

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

<div> can be any tag (e.g. <span>), but it has to be some tag. This same tag has to be set as the 'toleranceElement' in the options, and this, or one of its children, as the 'handle'.
Any <li> can have either one or two tags, the second being <ul>.

Custom options:

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
disableNesting: The class name of the items that will not accept nested lists. Default: 'ui-nestedSortable-no-nesting'
errorClass: The class given to the placeholder in case of error. Default: 'ui-nestedSortable-error'
listType: The list type used (ordered or unordered). Default: 'ol' (see changelog)

Custom methods:

serialize

Serializes the nested list into a string like setName[itemId]=parentId&setName[itemId]=parentId from each item's id reading 'setName_itemId' (where itemId is a number).
It accepts the same options as the UI Sortable method.

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,
}

looking at the items' id's as in serialize.
The left and right values comply with the nested set model.
This method accepts two options:
startDepthCount sets the starting depth number (default is 0), expression is the regex used to extract the number from the item's id (default is the same as serialize).
The first array element is the root element which contains all the others, and it is built from the available data with no need for any special entry.

1.2.1 Changelog:

Finally made serialize and toArray work in IE6+ (In fact, serialize already worked, but it was badly implemented in this demo page).

1.2b Changelog:

There was a trailing comma too much on line 21. Either download 1.2b or remove that comma yourself.

1.2 Changelog:

Added a custom option to specify the desired list type, and changed the default list type to <ol>. Since we are dealing with ordering sets of items ordered lists are the way to go according to HTML specifications.

1.1.1 Changelog:

Improved the toArray method (right and left values have been added, item_id and parent_id are now actual numbers).

1.1 Changelog:

Implemented serialize and toArray methods.

1.0.3 Changelog:

Fixed a bug that made IE 6 & 7 to not detect the correct placeholder height.
Fixed a minor visual issue.

1.0.2 Changelog:

Definitive fix for absolutely positioned lists.

Bugs:

None that I know of.

Roadmap:

~~1.1~~: ~~Adapt serialize and toArray in order to have it show the indentation level, somehow.~~
2.0: Make maxItems and maxLevels options.

Requires:

jQuery 1.4+
jQuery UI Sortable 1.8+

Browser compatibility:

Tested with: IE 6, Firefox 3.6, Chrome 5, Safari 3
Will also work with: IE 6+, Firefox 3.5+, Chrome 4+, Safari 3+

Licence:

Creative Commons CC Zero Declaration. No Rights Reserved. (But I will appreciate if you quote me)

nestedSortable jQuery Plugin 1.2.1

Sort and move list items between nested lists