Nested draggable list not causing droppable events to fire
I have a nested list of the type below. It represents a folder
hierarchy and I am trying to make it so that if the user drags any
folder in the tree, all of the children will be dragged along with
it. In the example below, if the user drags Folder1 the entire tree
comes with it (which is what I want). However, Droppable events only
fire when one of the child li's (Folder1.1.1 and Folder1.1.2 in this
example) are dragged into the droppable area (a div called dropZone).
It seems to me that if an element is allowed to be made Draggable, it
also should fire Droppable events. Has any else had this problem?
I've also noticed that if I use CSS to change the display property of
Folder1.1.1 and Folder1.1.2 from inline to none, Folder1.1 will now
cause Droppable events to fire.
<ul>
<li class='draggers'>Folder1
<ul>
<li class='draggers'>Folder1.1
<ul>
<li class='draggers'>Folder1.1.1</li>
<li class='draggers'>Folder1.1.2</li>
</ul>
</li>
</ul>
</li>
</ul>
My Javascript is below:
$(document).ready(function() {
$(".draggers").draggable({
revert: true,
opacity: 0.2
});
$(".dropZone").droppable({
accept: ".draggers",
drop: function (ev,ui) {
alert("dropped");
}
});
});
I am using jQuery 1.3.2 and UI version 1.7