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 hierarchies so if you dragged a <li> under another <li> that would create a hierarchy. 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

Excellent answer to this is

https://github.com/ilikenwf/nestedSortable

i am glad that I have found it. jstree was too heavyweight for me.

Answer 2

A "nestable" jquery plugin. Perfect for what I'm trying to do:

http://dbushell.com/2012/06/17/nestable-jquery-plugin/