[jQuery] Nested draggable list not causing droppable events to fire

[Jason]

I have a nested list which represents a folder hierarchy.  An example
of one of these lists is below.  Basically I want the user to be able
to drag any of the folders into a droppable.  As is, if the user
starts dragging Folder1 in the example below, the whole list is
dragged along as well (which is what I want).  However, when trying to
drop the list into a Droppable, the "drop" event doesn't fire.  If I
drag Folder1.1.1 or Folder1.1.2 below, the Droppable events fire just
fine.

<ul>
        <li class='draggers'><img class='plus' src='images/i.plus.gif'
onclick='reveal(10005)'>Folder1
        <ul>
                <li class='draggers children'><img class='plus' src='images/
i.plus.gif' onclick='reveal(10006)'>Folder1.1
                <ul>
                        <li class='draggers children'>Folder1.1.1</li>
                        <li class='draggers children'>Folder1.1.2</li>
                </ul>
                </li>
        </ul>
        </li>
</ul>

I have this in my Javascript:

$(document).ready(function() {
        $(".draggers").draggable({
                revert: true,
                opacity: 0.2
        });
        $(".dropZone").droppable({  //dropZone is a div
                accept: ".draggers",
                drop: function (ev,ui) {
                        alert("dropped");
                }
        });
});

There is another quirk.  When the page first loads, any element in the
'children' class has it's display set to "none" in my CSS.  If the
user clicks on a plus sign (the img tag in the example), the
'children' class has it's display set to "inline", causing it to
appear.  Prior to clicking on the plus sign to expand out the tree,
the element can be successfully dragged and dropped as well.  But once
it's children have their display set to inline, the parent list cannot
be successfully dropped (it can still be dragged though).  Has anyone
else had (and hopefully solved) this problem?