Droppable incorrectly determining target span

When adding droppable() to spans, the drop target is incorrectly determined, inconsistently.

In Chrome (Mac), dropping on span elements does not even trigger the event.

In Firefox, dropping on span elements triggers the drop() event, but the span is incorrectly determined. When dragging an item from outside any of the spans, it is correctly determined. But when dragging from inside one of the droppable spans, the inner-most span seems to over-ride the correct one, when Greedy is set (even when dropping outside that span).

This code demonstrates the problem. In Chrome, no drop() events are triggered at all. In Firefox, "Drag Me (Regular)" can be dragged onto Outer or Inner, and the drop() event triggers on the correct target. But when dragging "Drag Me (Inner)", the drop() event triggers on the "inner" span, even if it is dropped on the "outer" span.

<span id="outer" class="drop">

<div>Outer</div>

<span id="inner" class="drop">

<div>Inner</div>

<div id="inner_drag" class="drag">

Drag Me (Inner)

</div>

</span>

</span>

<div id="regular_drag" class="drag">

Drag Me (Regular)

</div>

<script>

$(".drop").droppable(

{

tolerance: "pointer",

greedy: true,

drop: function()

{

alert(this.id);

}

});

$('.drag').draggable({revert: true});

</script>