nestedSortable jQuery Plugin

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 item/list (no-nesting in the above list).
It is possible to indicate a maximum number of nesting levels.

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>

<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 <ol>.

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 1.2 Changelog)
maxLevels: How many nesting levels can the list have at the most. If set to '0' the levels are unlimited. Default: '0'
noJumpFix: Set this to '1' to deactivate the fix (see 1.2.2 Changelog), in case it messes things up for you. Default: '0'

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

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), attribute is the element's attribute that the method will look at (default is 'id').
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.

toHierarchy

Builds a hierarchical object with data from the nested elements in the form:


'0' ...
	'id' => itemId
'1' ...
	'id' => itemId
	'children' ...
		'0' ...
			'id' => itemId
		'1' ...
			'id' => itemId
'2' ...
	'id' => itemId

Similarly to toArray, it accepts the attribute and expression options.

1.3.4 Changelog:

Fixed: the depth of a list item's subtree was miscalculated, having top-level elements occasionally kicked out of the main <ol> containter.

1.3.3 Changelog:

Fixed: if <li> items had the end tag and an element was moved upwards, a text node was detected as previousItem instead of the correct <li> element.

1.3.2 Changelog:

Fixed: the position error wasn't detected at the exact moment an item was moved in a not-allowed position, but only after moving it 1px more.

1.3.1 Changelog:

Fixed: single-item maxLevels error wasn't recognized.
Fixed: toArray ran twice through nested items.
Added: an item nested too deep is now sent to the closest allowed position.

1.3 Changelog:

Implemented the maxLevels option.

1.2.3 Changelog:

The change event is now correctly triggered.
Using toArray and toHierarchy inside a change callback function (and possibly other events' callback functions as well) doesn't result in an error anymore.
The toArray method now outputs an ordered array.

1.2.2 Changelog:

Fixed an issue with the page jumping upwards in some situations with the list taller then the viewport.
Fix to prevent an item to be moved under a no-nest item while moved to the right. (Thanks to Philippe Archambault)
Added toHierarchy method. (Thanks to Milan Petrovic)

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.

Known bugs:

Text gets ugly when you sort items in some versions of IE, in certain situation. This is a sortable bug.

Roadmap:

~~1.1~~: ~~Adapt serialize and toArray in order to have it show the indentation level, somehow.~~
~~1.3~~: ~~Make a maxLevel option.~~

Requires:

jQuery 1.4+
jQuery UI Sortable 1.8+

Browser compatibility:

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

Licence:

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

This work is now pizzaware. If it saved your life, or you just feel good at heart, please consider offering me a pizza. This can be done in two ways: (1) use the Paypal button below; (2) send me cash via traditional mail to my home address in Italy. Is the second method legal? It is in Italy if you use Posta assicurata. You should check with your local laws if you live elsewhere.