jQuery Nested Sortable - Move LI elements within all available UL's

Question

I have the following code which works although it runs quite slowly I feel. What I want to do is allow <li>'s to be moved freely under existing <ul>'s or move them up a level. I also want to be able to create heirarchies so if you dragged a <li> under another <li> that would create a heirarchy. I think in that sense I would have to render a <ul> under each <li> just in case. I only want to limit it to 2 or 3 levels deep.

$("#sort_list").sortable({
  containment: 'parent',                                                                                     
  axis: 'y',
  revert: true,
  opacity: 0.8
});
$(".sub_list").sortable({ 
  containment: 'parent',
  axis: 'y',
  revert: true,
  opacity: 0.8,
});
$("#sort_list").disableSelection();

<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>

Answer 1

Most likely the jQuery UI library's sortable functionality isn't that configurable (it's very rudimentary, meant for sorting lists one level deep). You'd be better off simply using one of the tree plug-ins that support drag and drop.

The jQuery UI tree widget is in development, but you can use one of the following plugins:

http://www.jstree.com/

http://abeautifulsite.net/notebook/58

http://news.kg/wp-content/uploads/tree/

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

Answer 2

I have used JQuery Interface plugin which was easy to setup and worked pretty well for that task (check the demo), but I wanted something lighter and which do not require additional plugins.

Even JQuery UI library's sortable is kind of rudimentary you can still achieve somehow that functionality:

$("ul").sortable({
items:  '> li',
axis: 'y',
update: function (e, ui) {
    ...
}

This will let you sort "li" under any "ul" (if I can remember correctly). However it will not let you move "li" elements from one "ul" to another "ul". Even it is possible to do it (changing the configuration), I found it not so stable and somehow cumbersome.

I came up with a simple solution: a "flag button", which deactivate sorting and activate moving... and it works like a charm! All you have to do is to keep track the "li" parent id before and after moving it.

My 5 cents.