nestedSortable jQuery Plugin 1.2.1

Sort and move list items between nested lists

NOTICE: If you are using version 1.1.1 or lower, please note that the default list type has now changed to <ol>.
See Custom options and Changelog in the documentation below for more info.

  1. Item 1
  2. Item 2
    1. Sub Item 1.1
    2. Sub Item 1.2
    3. Sub Item 1.3
    4. Sub Item 1.4
  3. Item 3 (no-nesting)
  4. Item 4 (no-nesting)
  5. Item 5
  6. Item 6
    1. Sub Item 1
    2. Sub Item 3 (no-nesting)
    3. Sub Item 4
    4. Sub Item 5
  7. Item 7
  8. Item 8

Download full package (jQuery, jQuery UI, nestedSortable and demo page):
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.



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

<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:

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

Custom methods:

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

1.2b Changelog:

1.2 Changelog:

1.1.1 Changelog:

1.1 Changelog:

1.0.3 Changelog:

1.0.2 Changelog:


None that I know of.


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


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+


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

© 2010 Manuele J Sarfatti