mjsarfatti / nestedsortable

A jQuery plugin that extends Sortable UI functionalities to nested lists.

29 July 2014

nestedSortable is currently maintained at ilikenwf/nestedSortable. Please go there.

DEVELOPER NEEDED
I'm sorry to say that I am not able to keep the pace developing this project anymore. I know how much nestedSortable is important for web applications, and I still can't understand why it's not part of jQuery-UI. I also think the base of the plugin is very strong, and deserves much more attention and involvement. If anybody is willing to take this project, please say so here.
Thank you.

nestedSortable jQuery plugin

nestedSortable is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.
Note: Version 2.0 is published in branch '2.0alpha' and is ready for testing! At the moment it has only been tested in Firefox and Chrome, if you work with IE feel free to give it a shot and let me know if something goes wrong.

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.
• Sublists are created and deleted on the fly
• All jQuery Sortable options, events and methods are available
• It is possible to define elements that will not accept a new nested item/list and a maximum depth for nested items
• The root level can be protected

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>

	$(document).ready(function(){

		$('.sortable').nestedSortable({
			handle: 'div',
			items: 'li',
			toleranceElement: '> div'
		});

	});

Please note: every <li> must have either one or two direct children, the first one being a container element (such as <div> 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 <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

maxLevels

The maximum depth of nested items the list can accept. If set to '0' the levels are unlimited. Default: 0

protectRoot

Wether 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

isAllowed (function)

You can specify a custom function to verify if a drop location is allowed. Default: function(item, parent) { return true; }

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.

Known Bugs

nestedSortable 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).

Requirements

jQuery 1.4+
jQuery UI Sortable 1.8+

Browser Compatibility

Tested with: IE 6/7/8, Firefox 3.6/4, Chrome, Safari 3

License

This work is licensed under the MIT License.

This work is 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) follow this link to donate through paypal; (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.

nestedsortable's Issues

How to use isAllowed function?

isAllowed: function(item, parent)
{
alert('disableNesting');
return true;
}

Error on initialize

Here is the js https://gist.github.com/4001049
Here is the html https://gist.github.com/4001070
The js is loaded in the folowing sequence:
jquery.js v.1.8.2
jquery-ui.js v.1.8.23
jquery.nestedSortable.js v.2.0
pages.js

The error is:
Error: cannot call methods on nestedSortable prior to initialization; attempted to call method 'option'

The error is triggered when I try to drag an item.

toArray: Wrong left and right values due to root node

First of all, I really like this plugin! Great work.

There is a bug in the toArray method wich makes left and right values go wrong. This happens because the root node is counted twice in the current situation. The fix is to skip the root node and start counting with the children of the first list item.

Current situation line 289:
$(this.element).children(o.items).each(function () {

New situation line 289:
$( this.element ).first( 'li' ).children('li').each(function () {

Empty sublist are removed.

My HTML looks more or less like this:

<ol>
  <li><a class="title">Item</a></li>
  <li><a class="title">Item</a></li>
  <li><a class="title">Item</a></li>
  <li>
    <a class="title">Group</a>
    <ol>
      <li><a class="title">Item</a></li>
      <li><a class="title">Item</a></li>
      <li><a class="title">Item</a></li>
     </ol>
  </li>
</ol>

and I intialize it like this:

  tree.nestedSortable({
    disableNesting: "no_children",
    forcePlaceholderSize: true,
    handle: "a",
    helper: "clone",
    items: "li",
    maxLevels: 10,
    opacity: .6,
    placeholder: "placeholder",
    revert: 250,
    tabSize: 25,
    tolerance: "pointer",
    toleranceElement: "> a",
    connectWith: ".connected_field_lists"
  });

The problem is that when I have an empty sublist,

and I move it or I move anything around it, the empty sublist is removed and I can't add things again to it.

Integer as ID attribute breaks

I don't know if this is an limitation of html and integers as id's attribute.

The problem is when I set the id attribute as id="2" in html, It returns the error:

Uncaught TypeError: Cannot read property '2' of null

Workaround was to prefix it with some text just like in the example.

Elements w/o parents return "null" as a string, instead of empty string, MySQL interprets as 0

I'm using the 'develop' branch and if rootID is null, then when it gets serialized, it will return "null" as a string, rather than an empty string. This causes problems with MySQL where it interprets the string 'null' for an integer field as invalid and sets it to '0'. My parent_id field gets set to '0' in the database instead of (sql's) NULL.

If it just returns the empty string when rootID is null instead, it will fix it, ie replacing

o.rootID

with

o.rootID?o.rootID:''

everywhere in the file.

widget failed on IE for jQuery-ui-1.8.2?

This is amazing btw. it works great.
Not sure if it is only me or not but it fails on IE (I use 9 for this test) when combine with jQuery-ui-1.8.2, works for everything in firefox and chrome. maybe it is an IE issue. when I change the UI to 1.8.11, it works on UI.
Thank you very much for this. I really appreciate it.

toArray return one more 'Unnecessary' object (a wrapper)

Hi,
Sorry fir my bad english :(
I don't know why toArray return one more object that wrap other objects(it changes the 'left' and 'right' values)
For example if i have 2 'li' it returns for me 3 objects !!
How can i fix it ??

You can see the results in the image below

isAllowed arguments should contain "currentItem" and "item" should be renamed "placeholder"

"isAllowed" method just have access to the "parentItem" (the drop target) and the misleadingly nammed "item" which in fact is not the item being dropped, but the placeholder.

This limit greatly the usefullness of this method...
Static constraints can already be declared using "disableNesting" and "maxLevels", therefore the real use of "isAllowed" is expressing dynamic, context-dependant constraints.
By providing only the placeholder and the parent node you give user a small part of the context (the drop position in a given childList) which (IMHO) is of little help. By also providing "currentItem" the user could write constraints depending on the nature of the item being dropped, ex :
Leaf node of type A can only be appended to node of type B and D

Scrolling does not work when place inside a div with position: absolute

When dragging an item down out of view, the page does not scroll.
My lists is contained inside an absolute positioned div.

Keep in container list

Looking at the example on http://mjsarfatti.com/sandbox/nestedSortable/

Basically, I would like to constrain the subitems to only be orderable within their parent item.
So in the example, "Sub Item 1.1" and "Sub Item 1.2" can only be interchanged, but cannot be placed anywhere else.

I was trying to make use of the isAllowed function, but apparently this plugin strips away data tags from the li element. (I added data-parent attributes.)

Using <ul> crashes Google Chrome

As soon as I try to use your plugin for an

element instead of an
element (which works perfectly fine with standard jQuery UI sortable()) Chrome freezes. I don't think that's intended and should be at least documented

Accessibility?

Can this be made to navigate and sort by keyboard and audio?

sortchanged event does not work

Noticed that sortchanged event does not work as expected, it is not fired when subelement order changes.

I propose you to propagate subtree's sortchanged event using $.trigger to the outermost sortable.

As a workaround my ajax plugin saves the ordering on sortstop, it just a bit hackish as the saving must be done even when no changes is done.

conflict with jquery UI

Hi,

after upgrading to jquery-ui 1.9.2, I get this message when trying to load nestedsortable:

$.widget.extend is not a function

I've googled a bit about it and it seems like this message happens when UI has been loaded twice but I don't see a double load and the problem only occurs with nestedsortable.

Can you help me to solve it?

Thanks!

Question about "toArray" method

Hi

First of all, thanks for your great plugin!

The toArray method has a problem.

Only the first item receive the depth of 0 (but there are many others with a depth of 0). I've tested it on my own items, and I have the same problem.

l '0' ... 'item_id' ... 'parent_id' => "none" 'depth' => "0" 'left' => "1" 'right' => "22"
see demo: http://mjsarfatti.com/sandbox/nestedSortable/

restrict the child moving to other parent and only change the child positions

Hi

I have three questions
How can i restrict child moving to other parent .
Should only drag and drop in their nest just for position change .
The child should restrict to become root or parent.

jQueryUI 1.9.1 problem

Hello,
I've just tryed nestedSortable with jQueryUI 1.9.1 and it has some problems, shivering is much worse than in 1.9.0, sometimes there is even imposible to move some items inside some nodes. Can someone check compatibility with 1.9.1?

http://jqueryui.com/changelog/1.9.1/

Maxlevels issue

Hi.
When I Maxlevels to 2, everything is fine as long as i'm dragging an element to a parent which currently doesn't have any submenu. When i try to add another submenu to that one, it doesn't allow it. So far so good!
On page reload, it DOES allow a submenu (third maxlevel) on that submenu. I take it this is a bug.

Would be nice if this would be fixed.

Greets.

I have already implemented nestedSortable,Now i want to customise it,is it possible?

i want my customization in such a way that in my view if i have my tree structure of only Top level nodes and if i click on any of the top level node then it should be expanded which would be having all of its child and sub-child nodes.please advice.....

HTML5 instead of jquery ui

Hey,

jquery ui seems to be quite a huge load and it often has errors. I do not know if this is possible, but maybe the nestedSortable could be ported to html5?

.serialize bug

Using the "key" argument for the .serialize method results in a string with no array indices.
Line 228 from the master branch should be changed from

str.push((o.key || res[1] + '[' + (o.key && o.expression ? res[1] : res[2]) + ']')

to

str.push(((o.key || res[1]) + '[' + (o.key && o.expression ? res[1] : res[2]) + ']')

I'm completely new to github so I'll try to submit a bugfix/pull request, but if I don't manage to do that in a reasonable amount of time, I'm leaving this here for reference.

Empty OL / UL are not being cleared

Empty OL /UL lists are not cleared after a movement.

After futher investigation it seems that the actual moving element is still in that OL/UL, along with his helper.

I'm using:
jquery 1.8.1 (google cdn)
jquery ui 1.8.23 (google cdn)

It happens at least in Firefox (10.x) and Chrome (22.x)
It seems to me that the _clearEmpty function is not working properly.

When you add :
if (emptyList.length && !emptyList.children().length) {
emptyList.remove();
} else {
console.log(emptyList);
}
// EXAMPLE OUTPUT
[<ol></ol>]
It will print an empty <ol></ol>

When using
if (emptyList.length && !emptyList.children().length) {
emptyList.remove();
} else {
console.log(emptyList.html());
}

// EXAMPLE OUTPUT:
<li id="list_10" style="display: none; "><div class="node">Item 5</div></li><li id="list_10" style="display: list-item; width: 200px; height: 22px; position: absolute; opacity: 0.6; z-index: 1000; left: -13px; top: -2px; " class="ui-sortable-helper"><div class="node">Item 5</div></li>

It prints the old item in it's old place with its helper.

I tried several things to let the empty lists being removed.

The only solution this far was copying the whole _clear function from the ui.sortable and add at the end :

// Clean last empty ul/ol
for (var i = this.items.length - 1; i >= 0; i--) {
    var item = this.items[i].item[0];
    this._clearEmpty(item);
}

But I think this is not the way to do it.

Greetings

toArray() uses the id attribute hardcoded to get parentItem

on line 271 is the following code:

$(item).parent(o.listType).parent('li').attr('id')

It grabs the id from the parent item, however the id doesn't always have to be inside the HTML id attribute (as taken into account when selecting the item id on line 266):

$(item).attr(o.attribute || 'id')

In order for users to pass their own attribute without getting a "can not call match() on undefined" error the piece of code on line 271 that I showed needs to change to:

$(item).parent(o.listType).parent('li').attr(o.attribute || 'id')

Pre-populated sub-elements are not movable

Hi guys,

when pre-populating my nested list with sub-elements, they are not moveable. Instead, the parent element is moved instead.
See here: http://jsfiddle.net/gcWQQ/3/

Any hints for me???

Best regards,
Peter

Detect the listType from element, avoid browser freeze

Hi!

I spent last hour wondering why the hell it doesn't work, my browser (Chrome beta) freezed literally. And the reason? Default list type is ol not ul. If I try to use $("ul.sortable").nestedSortable it just freezed.

Ways to fix this:

1. Detect the listType from the parent element using nodeName, e.g. jQuery("<ul></ul>").get(0).nodeName...
2. Throw error and don't freeze the browser.

isAllowed option question

In the documentation the isAllowed function has parameters of item and parent. I can't tell if parent means the new parent item that I'm trying to move the item under, or if it is the parent that the item originally originated from.

Missing ) on line 233 of development branche

I found an error in the latest update in the development branche. There is a ) missing on line 233 of query.mjs.nestedSortable.js.

Current situation:

• (pid ? (o.key && o.expression ? pid[1] : pid[2]) : o.rootID);

New situation:

• (pid ? (o.key && o.expression ? pid[1] : pid[2]) : o.rootID));

onChange should be change

With the latest jQuery UI, it appears change is the correct usage, not onChange.

Hangs randomly on all browsers

I'm having the same problem with master and develop here. Not sure if it's something I've done. My HTML looks like:

<ol class='unstyled' id='content-sections'>
  <li class='section' id='section_4f78a0ab0841f7537e000001'>
    <div class='content clearfix'>
      <h3 class='float-left'>
        <i class='icon-move'></i>
        asdfasdfasd
      </h3>
      <div class='btn-group float-right'>
        <a href="/books/4f6ea7ac0841f72fd5000010/sections/4f78a0ab0841f7537e000001/edit" class="btn">Edit</a>
        <a href="/books/4f6ea7ac0841f72fd5000010/sections/4f78a0ab0841f7537e000001" class="btn" data-confirm="This will permanently delete this section, are you sure?" data-method="delete" rel="nofollow">Delete</a>
      </div>
    </div>
    <ol>
      <li class='section' id='section_4f6f50db0841f738e7000003'>
        <div class='content clearfix'>
          <h3 class='float-left'>
            <i class='icon-move'></i>
            Hgfhgvhgv
          </h3>
          <div class='btn-group float-right'>
            <a href="/books/4f6ea7ac0841f72fd5000010/sections/4f6f50db0841f738e7000003/edit" class="btn">Edit</a>
            <a href="/books/4f6ea7ac0841f72fd5000010/sections/4f6f50db0841f738e7000003" class="btn" data-confirm="This will permanently delete this section, are you sure?" data-method="delete" rel="nofollow">Delete</a>
          </div>
        </div>
      </li>
      <ol>
        <li class='section' id='section_4f6f50e80841f738e7000005'>
          <div class='content clearfix'>
            <h3 class='float-left'>
              <i class='icon-move'></i>
              Ihbihbihbihb
            </h3>
            <div class='btn-group float-right'>
              <a href="/books/4f6ea7ac0841f72fd5000010/sections/4f6f50e80841f738e7000005/edit" class="btn">Edit</a>
              <a href="/books/4f6ea7ac0841f72fd5000010/sections/4f6f50e80841f738e7000005" class="btn" data-confirm="This will permanently delete this section, are you sure?" data-method="delete" rel="nofollow">Delete</a>
            </div>
          </div>
        </li>
      </ol>
    </ol>
  </li>
  <li class='section' id='section_4f864bfb0841f75e2c000002'>
    <div class='content clearfix'>
      <h3 class='float-left'>
        <i class='icon-move'></i>
        dsfsdfs
      </h3>
      <div class='btn-group float-right'>
        <a href="/books/4f6ea7ac0841f72fd5000010/sections/4f864bfb0841f75e2c000002/edit" class="btn">Edit</a>
        <a href="/books/4f6ea7ac0841f72fd5000010/sections/4f864bfb0841f75e2c000002" class="btn" data-confirm="This will permanently delete this section, are you sure?" data-method="delete" rel="nofollow">Delete</a>
      </div>
    </div>
  </li>
</ol>

And my javascript:

this.$('#content-sections').nestedSortable({
        handle: 'i',
        items: 'li',
        maxLevels: 3,
        toleranceElement: '> .content'
      });

Placeholder not visible

Using: jQuery 1.7.2, jQuery UI 1.8.18, jQuery Nested Sortable 1.3.5.
Can't customize the look of a placeholder to drop the item/
It seems that its behavior has been changed. Now it gives markup like this:

 <li class="ui-sortable-placeholder" style="visibility:hidden; height:24px;" >

So even if I use that class in the css, it would not show up.
There must be some way to overcome it.

protectRoot doesnt work when moving fast repeatedly

When this option is enabled and i try to move the same root node again fast while still being moved it parses the root node to a sub item!

Try to move a rootnode to a sub and try to do it fast again while the root node is going back to its root position

Prepopulation error

This plugin is not work on pre population data. I am passing the HTML format from PHP and take the jQuery for pre population.

draggable list - locking child nodes in template

I'm using nestedSortable for a simple workflow designer. We have a draggable list of items that serve as templates for types of workflow steps. One workflow step is a boolean branch (do this if true, do that if false). My draggable template looks like the following:

    <li class="ui-state-highlight draggable blue no-nest">
        <div class="title">
            Boolean
            <div class="button" onclick="$(this).parent().parent().remove();">X</div>
        </div>
        <ol class="cases">
            <li class="ltblue"><div class="title">True</div><ol></ol></li>
            <li class="ltblue"><div class="title">False</div><ol></ol></li>
        </ol>
    </li>

The addition of the "no-nest" class on the LI tag keeps other steps from being added at the same level as the True and False templates when one is pulled into the sortable list. However, the True and False nodes are themselves still sortable...meaning I can pull the entire True structure out to a different level where it breaks my workflow rules (each Boolean step must have a True and a False child).

Any idea how I can lock those children in place, like through the use of a CSS class? Something like "no-move"?

BTW, this is one of the coolest, simplest jQuery projects I've ever seen...love it!

JS error on loading - "Cannot read property 'left' of null"

jQuery UI gives this error when I load the script: Cannot read property 'left' of null
How does my js look?

$(document).ready(function () {

    $('.project-wizard').nestedSortable({
        handle: '.inner-wrap',
        items: 'li',
        toleranceElement: '.inner-wrap',
        listType:'ul'
    });

});

clone the original object

Hi,

When dragging a

, is it possible to have the object cloned (like in jQuery UI Sortable clone) instead of being moved?

Using nestedSortable

Hello,

Sorry, I cannot understand what is the meaning of left and right in the following codes:-

setName[n] =>
{
'item_id': itemId,
'parent_id': parentId,
'depth': depth,
'left': left,
'right': right,
}

what do they want? Thanks!

Code breaks when option 'scroll' is set to false (patch included)

When setting the 'scroll' option to false, _mouseDrag fails because of scope issue. The fix is quite simple, just set the value for 'o' variable one block higher :

l54 :

}

var o = this.options; // <- this should be here

//Do scrolling
if(this.options.scroll) {
    var scrolled = false;

Incompatible with touch

Jquery sortable works on iOS and other touch platforms when paired with TouchPunch, but this doesn't. Any leads?

Empty placeholder not cleared/remove after drop and not draggable anymore

Dragging a item accross rows adds follow code between the rows:

<li class="item ui-sortable-placeholder" style="visibility: hidden; "></li>

But it doesn't move them after a drop and the list is not draggable after that anymore at all.

This seems to occur when you cross to a sublist.

Please see the short attached video showing this issue:

http://screencast-o-matic.com/watch/cl6ZbjSuO

connectWith option works but makes the first level elements that don't have a child, to reject nested elements.

Hi mjsarfatti, first of all great work! Thanks.

Now the issue:
I've used the option (connectWith: ".connectedSortable") that enables two sortable lists to share sortable elements, according to: jQuery UI Doc.

The code that I used was:

<ol id="sortable1" class="connectedSortable">
  <li><div>sortable1 1</div></li>
  <li>
    <div>sortable1 2</div>
    <ol>
      <li><div>sortable1 2.1</div></li>
      <li><div>sortable1 2.2</div></li>
    </ol>
  </li>
  <li><div>sortable1 3</div></li>
</ol>

<ol id="sortable2" class="connectedSortable">
  <li><div>sortable2 1</div></li>
  <li>
    <div>sortable2 2</div>
    <ol>
      <li><div>sortable2 2.1</div></li>
      <li><div>sortable2 2.2</div></li>
    </ol>
  </li>
  <li><div>sortable2 3</div></li>
</ol>

<script>
  $(document).ready(function(){
    $('#sortable1, #sortable2').nestedSortable({
      handle: 'div',
      items: 'li',
      toleranceElement: '> div',
      maxLevels: 2,
      connectWith: ".connectedSortable"
    });
  });
</script>

The thing is.
Elements that already have children ("sortable1 2" and "sortable2 2") work fine, but the ones that didn't have a child in the first place ("sortable1 1", "sortable1 3", "sortable2 1", "sortable2 3"), don't accept new ones.

I can see that by dragging an element hover these elements ("sortable1 1", "sortable1 3", "sortable2 1", "sortable2 3") that the <ol></ol> that should contain the child elements is being created, but with no content in it and when I drop the element, the <ol></ol> disappears.

Can you help me with this Manuele?
Thanks again, and keep up the good work :D
John.

isAllowed() callback does not provide item being moved

I just downloaded your dev branch....

the isAllowed() callback should pass the item being moved as per what the documentation says. However, what it gets is the parent container and the placeholder.

If you modify _isAllowed() to pass this.currentItem[0] as the first parameter (and shift other parameters over), then this should allow one to see not just where we're moving to but what the item is. In my case, I have a tree of 'pages' and want to sort the items within a given sublist/branch, but not allow the parents to change.

Without knowing what item is being moved, it's impossible to know if the drop location is a different parent or not.

Output containing more parameters

Hi,

I can implement nestedSortable in my php webpage, and I understand that there are 3 ways being serialize, toArray and toHierarchy for outputing the structure data.

Actually, I would like to include more parameters like text field and status to the output, is it possible for me to modify any one type of above to achieve the task? Thanks!

IE7 placeholder size issue

In IE7, or IE8 / 9 in compatibility mode, the size of the placeholders is not the same as the size of the li being moved. It's much smaller in height, around 15px high.

Even if the li being moved has a nested list, making it's height very large, the placeholder remains ~15px high.

Issue can be replicated on the sandbox:
http://mjsarfatti.com/sandbox/nestedSortable/

Horizontal ul + vertical sub ul problem

Is there anyway to make this work with lists that are displayed using a mixture of horizontal and vertical lists? Basically I am trying to make a standard dropdown menu sortable.

I set all the dropdowns to be visible and then want the user to be able to drag elements in and out of the toplevel and in and out of the dropdowns- exactly like your demo but with the top level displayed horizontally. jQ-ui sortable almost does this out of the box actually, you can sort the drop downs, elements in the drop downs and drag elements from one drop down to another, what you cant do is drag things from the drop down to the top level or drag a sub menu element to be the sub element of a top level that doesn't already have child elements- both of which yours does do- but I cant see a way to make it work with a horizontal top level.

This is jQ ui sortable and you can see its just about there but missing your features http://jsfiddle.net/Gdadu/22/

When 'disableNesting' is set, those elements still have drop zones

When I set disableNesting: 'file', it properly disables the specified class, but it doesn't disable the drop zone, leading to some very confusing user experience. Is there any way to disable a certain type of element AND disable its drop zone?

No event

I think, this plugin should be more event. eg (draggable, droppable,...).

toArray and toHierarchy

Both methods look for 'li' as a childrens of options.listType instead of options.items

How to expand nodes using AJAX?

We have large tree, like to expand nodes on click on a icon, is it possible to implement this?

All nested lists/items count as one big item off the root?

Hi there, using jquery ui 1.8 and jquery 1.7 (same thing you used in your demo page).

I posted the question to stack overflow: http://stackoverflow.com/questions/13885514/jquery-ui-nested-sortables-all-nested-lists-items-count-as-one-item-off-the-roo

Seems like the

wrapping the nest lists causes the one issue, and I can't figure out what is causing the other issue (all child items off root count as one big item including the root item).

There are JSfiddle links in the SO question too. Any idea on what's causing the problem?

Thanks and AWESOME plugin btw, wish the UI folks would integrated it into the build!