Creating multiple droppable siblings that at positioned on top of eachother

Question

I am trying to create multiple jquery droppables next to eachother where some parts might overlap, in these cases I want the one that is on top (z-index wise) to be greedy.

I have tried setting the greedy: true option in the droppable, but this does not seem to help. I have also tried to return false on the drop event and used event.stopPropagation();.

Here is a jsfiddle based on the demo page of jquery.

Is there any way to stop the drop event from propagating if there is another droppable triggering it, preferably the one that has the highest z-index?

Answer 1

Use document.elementFromPoint to check the element directly under the cursor. If it’s not your droppable, don’t do anything. Add the following to the top of your drop: handler:

var droppable = $(this);
ui.helper.css({pointerEvents: 'none'});
var onto = document.elementFromPoint(event.clientX, event.clientY);
ui.helper.css({pointerEvents: ''});
if(!droppable.is(onto) && droppable.has(onto).length === 0) {
    return;
}

Disabling pointer events on the helper is necessary for document.elementFromPoint to ignore the thing your dragging and only checking underneath. I’ve updated your jsFiddle for a quick demonstration. Note that the highlight still affects both elements. You should be able to change that by not letting jQuery UI do the highlighting but instead write it yourself on the draggables drag: event. I have, however, found this to be unusable in practice as this check (and disabling pointer events) is quite slow and may also cause flickering.