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.

Answer 2

You need a function to check if the element is the highest visible element. Something is the highest visible when

1. The item is later in the dom list
2. It has a higher z-index set

The below function can be used to see if the current element (either in over method or drop method in the droppable setting) is in fact the highest visible element.

function isHighestVisible(cEl) {
    cEl = $(this); //use this if you want to use it in the over method for draggable, else just pass it to the method

    //get all active droppable elements, based on the classes you provided
    var $list = $('.ui-widget-header.ui-state-active');
    var listCount = $list.length;
    var HighestEl = null;
    var HighestZI = -1;


    //one element is always highest.
    if (listCount<=1) {
        console.log(cEl.attr('id'));
        return true;
    }

    //check each element
    $list.each(function(i) {
        var $el = $(this);

        var id = $el.attr('id');

        //try to parse the z-index. If its 'auto', return 0.

        var zi = isNaN(parseInt($el.css('z-index'))) ? 0 : parseInt($el.css('z-index'));

        if (zi>0) {
            //z-index is set, use it.
            //I add the listCount to prevent errors when a low z-index is used (eg z-index=1) and there are multiple elements.
            //Adding the listCount assures that elements with a z-index are always later in the list then elements without it.
            zi = zi + listCount;
        } else {
            //z-index is not set, check for z-index on parents
            $el.parents().each(function() {
                $par = $(this);
                var ziParent = isNaN(parseInt($par.css('z-index'))) ? 0 : parseInt($par.css('z-index'));
                if (ziParent>0) {
                    zi = ziParent;
                    return false;
                }
            });
        }

        //add the current index of the element to the zi
        zi += i;

        //if the calculated z-index is highest, change the highest element.
        if (HighestEl==null || HighestZI<zi) {
            HighestEl=$el;
            HighestZI = zi;
        }
    });

    //if the highest found active element, return true;
    if (HighestEl.attr('id')==cEl.attr('id')) {
        console.log(cEl.attr('id'));
        return true;
    }

    //if all else fails, return false
    return false;
}

Answer 3

If i had this issue i would use jQuery's .addclass

.droppablewidgetforce {
z-index: 1000 !important; 
}

make a class as such so the layer stays on top no matter what.. this should fix the issue.

Answer 4

The greedy options is just for nested elements that have a droppable parent.

In your code the 2 droppable elements are siblings so the greedy option will not work:

<div id="droppable3" class="ui-widget-header">
    <p>Outer droppable</p>
</div>
<div id="droppable3-inner" class="ui-widget-header">
    <p>Inner droppable (greedy)</p>
</div>

Here is a messy workaround if you still want to use siblings instead of parents and children.

Live code example.

function normalDraggedOver() {
    $( this ).addClass( "ui-state-highlight" )
             .find( "> p" )
             .html( "Droppeeeed!" );
}

var options = {
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    greedy: true,
    drop: normalDraggedOver
};

var options2 = {
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    disabledClass: "ui-state-disabled",
    hoverStateClass: "ui-state-hover",
    greedy: true,
    greedyWithSibligs: true,
    drop: normalDraggedOver,
    over: function () {
    /* if we have previous siblings of the inner element we handle them as parents */
        if(options2.greedyWithSibligs && $(this).prev().length > 0) {       
            $(this).siblings().slice(0, $(this).index())
            .removeClass(options2.hoverClass)
            .droppable('disable')
            .removeClass(options2.disabledClass)
            .removeClass(options2.hoverStateClass);
        }
    },
    out: function () {
    /* all the siblings of the inner element that were handled as parents act as one*/
        if(options2.greedyWithSibligs && $(this).prev().length > 0) {
            $(this).siblings().slice(0, $(this).index())
            .droppable('enable')
            .addClass(options2.hoverClass);
            console.log($(this).attr('id'));
        }
    }
};

Answer 5

If just want it to look the same you can set the #droppable3 to position: relative and set the child #droppable3-inner to position: absolute.

HTML:

<div id="droppable3" class="ui-widget-header">
    <p>Outer droppable</p>
</div>
<div id="droppable3-inner" class="ui-widget-header">
    <p>Inner droppable (greedy)</p>
</div>

Here is the live example