Skip to main content

Search and Top Navigation

#7771 closed bug (notabug)

Opened October 06, 2011 06:51PM UTC

Closed October 06, 2011 07:04PM UTC

Last modified October 06, 2011 08:37PM UTC

Droppable incorrectly determining target span

Reported by: draggable Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.droppable Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:
Description

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>

Attachments (0)
Change History (6)

Changed October 06, 2011 06:54PM UTC by draggable comment:1

_comment0: jsFiddle: \ == http://jsfiddle.net/SzwcT/ == \ \ 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.1317927403159740

Changed October 06, 2011 07:04PM UTC by scottgonzalez comment:2

resolution: → invalid
status: newclosed

You can't place a div inside a span; that's invalid HTML.

Changed October 06, 2011 08:26PM UTC by draggable comment:3

Problem remains when using divs but setting "display: inline;"

Changed October 06, 2011 08:29PM UTC by draggable comment:4

Problem comes from the fact that jQuery calculates the bounds elements with display:inline based on the elements within them, so they grow as the draggable item is moved around (and thus never exits the inner element of my example).

Partial solution is to use helper:"clone", so that the draggable element itself is never moved (and thus the outer inline element doesn't change size either).

Perhaps a better solution would be to allow the calculation of bounds only at the start of the drag and not update them as the draggable element is dragged (it seems like a variant of this exists: refreshPositions)

Changed October 06, 2011 08:34PM UTC by scottgonzalez comment:5

A better solution is to not put block level elements inside inline elements. It really screws things up and is technically wrong, even if the validators don't catch it.

Changed October 06, 2011 08:37PM UTC by scottgonzalez comment:6

You can use inline-block on the wrappers too, since it's valid for them to contain block level elements.