NestedSortable is an extension to the original Sortable from the Interface plugin that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop. If can be set up exactly like a regular Sortable and allows you to use most options that are inherited from it.

Some examples of possible usages:

* Organizing a table of contents
* Organizing a list of hierarchical pages (it was originally created with this goal, for WordPress)
* Organizing categories

You can set it up as simply as that

$('#list-container').NestedSortable(
  {
    accept: 'sortable-element-class',
  }
);

Given that you have a container with Nested HTML elements like this one:

<ul id="list-container">
  <li class="sortable-element-class" id="ele-1">
    Element 1
  </li>
  <li class="sortable-element-class" id="ele-2">
    Element 2
  </li>
  <li class="sortable-element-class" id="ele-3">
    Element 3
    <ul>
      <li class="sortable-element-class" id="ele-4">
        Element 4
        <ul>
          <li class="sortable-element-class" id="ele-5">
            Element 5
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Demo: http://www.bernardopadua.com/nestedSortables/test/nested_sortable/

Download: http://plugins.jquery.com/files/nestedSortables.1.0.1.complete.with.tests.zip

Source: http://plugins.jquery.com/project/NestedSortable

Related Listings:

1. Accordion Plugin using Jquery Script This plugin is now part of jQuery UI and this...
2. Alternative Select Multiple with Jquery A progressive enhancement to select multiple form elements. It provides...
3. CSS Text Wrapper Script When you have a a large list of items (e.g....
4. jNice – jQuery form plugin Create custom looking form elements, that function like normal form...
5. Hwy jQuery ListMenu Plugin This jQuery plugin, developed in the iHwy Labs, allows you...

Do you like this post?

Email: