jQuery droppable and scrollable divs

Question

I have a little problem with jQuery UI\'s droppable component, but I\'m not quite sure whether I have that problem because of my code or because of a bug in the component.

Answer 1

Recently solved this exact same problem so thought I'd share here.

First thing I'll mention is that a similar issue involving nested droppables and event bubbling is solved here. The solution below solves the issue for NON-nested, but overlapping droppables.

THE PROBLEM (IN TECHNICAL TERMS)

If you review OP's jsfiddle using his instructions, you will notice that both of those DOM elements are independent of each other and live on the same DOM "level". However, as OP and a few others have noticed, jQuery UI's Droppable seems to bubble the drop event to DOM elements with overflowing content underlapping the target droppable.

THE SOLUTION

Set a flag when the element is dropped in the target droppable. Check the flag in the drop event of the underlapping DOM element. If this flag contains the value indicating that it has been dropped in the target droppable, return false, do nothing, or revert. Whatever you want to do to ignore the drop event.

For my particular case, I set my flag via a simple attribute value to ui.helper in the target droppable's drop event like so:

$(ui.helper).attr('ignore-drop-event', "true");

In the bubbled drop event on the underlapping droppable, I check that this attribute is set to true:

if ($(ui.helper).attr('ignore-drop-event') === "true") {
    // Ignore this drop event since it occurred as part of event bubbling
}
else {
    // This is a "real" drop event
}

This solution relies on the assumption that

1. Event bubbling order is consistent. Meaning the target droppable will always receive the event prior to the underlapping droppable element. I don't know if this is always true, but this assessment has been accurate in my testing.

2. The attribute value is defined prior to the flag check on the bubbled drop event.

Hope this helps someone else out there.