Sortable, Draggable and Droppable combined

Sortable, Draggable and Droppable combined


I'm trying to implement something a bit complicated. What I want is a
sortable hierarchy of "zones" (basically a OL with LI elements) and a
list of "controls" I can drag-drop inside this sortable hierarchy. So
I have two lists, basically like this:
<ol class="zones">
<li class="zone">
Zone 1
<ol class="zones">
<li class="zone">Zone 1-1</li>
<li class="zone">Zone 1-2</li>
</ol>
</li>
<li class="zone">Zone 2</li>
</ol>
<ul class="controls>
<li><div class="control">Control 1</div></li>
<li><div class="control">Control 2</div></li>
</ul>
So, from "ul.controls" I want to be able to drag "div.control" and
drop them inside "ul.zone". Easy enough:
$('li.zone').droppable({
accept : '.control',
drop : function(e, ui) {
$(this).append($(ui.draggable.element));
}
});
$('div.control').draggable({ helper: 'clone' });
This works okay, but when controls are dropped inside a "zone", they
are moved from the "ul.controls" list. I'd like to be able to drag the
same control several times, so I have to clone the control somehow.
I've tried to do a little "control.clone()" inside the "drop" event
handler code, but that only causes the control to be cloned for each
and every level of drop zone and not just the one I'm dropping it to.
I'm not sure if that last bit made any sense. The problem is that when
you're hovering over e.g. "Zone 1-2", you're also hovering over "Zone
1". When you drop inside "Zone 1-2" you're therefore also dropping
inside "Zone 1", but when you're appending the element to "Zone 1-2",
it is somehow not appended to any other zones further up in the
hierarchy. This behaviour changes when we clone the control; it now
ends up in every zone upwards in the hierarchy.
As mentioned, I'm trying to get this to work with the "ol.zones" list
being sortable as well. As mentioned in <http://groups.google.com/
group/jquery-ui/browse_thread/thread/cb30d348dd0eb2f>, I have a
problem with nested sortables being "un-nested" which also affects
their ability to work as drop targets.
I'd love to get any kind of help with this so I can get this to work.
Thank you very much in advanced,
Best regards, Asbjørn