Sortable inside Sortable?

Sortable inside Sortable?

The HTML (Think its too big to copy and paste?), is basically structured like so:

  1. There's a UL, with other ULs inside it, with more ULs, * infinity (theoretically). #listOne is a div that contains the ULs.
  2. There's another UL (#listTwo) that is one level deep.
My goal is to have LIs in #listOne UL (all the ULs inside the Div), sortable between themselves as well as be able to drop items from #listTwo into any #listOne ULs.

Essentially I'm trying to create a "tree" editor that you can drop and drop items into child and parent lists. Maybe this has been done somewhere? Somewhere I can look at examples?

My javascript:

  1.     $("#listOne ul").sortable({
                                         connectWith: "#listTwo",
                                         delay: 300,
                                         distance:15,
                                         dropOnEmpty: true
                                         });
        $("#listTwo").sortable({
                                            connectWith: "#listTwo ul",
                                            helper: 'clone',
                                             delay: 300,
                                             distance:15,
                                            });











Everything works fine EXCEPT, I can't get the helper: 'clone' to do what I expect on listTwo. Meaning, when you drag an item from listTwo, I would expect it to clone the LI (like a draggable).

The reason I don't use the Sortable + Draggable solution is that it seems when I drop a draggable inside a sortable that is inside multiple sortables, it creates a copy (using the clone helper) of the LI in the target Sortable as well as the target sortable's parent sortables.

I hope this makes sense to someone. haha

Any help?