Detect multiple items under draggable object? Javascript / jquery

Question

I have a button that dynamically creates an object and makes it “draggable” using the following code using jquery:

createNewDiv(divId); <--local function that creates a new div with id=divId
$("#"+divId).draggable();

which makes the element with the Id = divId element draggable (thanks to jquery libs), so any newly created element can be dragged and dropped anywhere on the page

Now suppose I create the elements A, B and C, they are all dragged and I drag n 'drop one on top of the other (so that C stays “over” B, and B stays “over” A, like paper sheets stacked one over another)

Is there a way to determine which elements are below each of them? For example, when you hover over C, does it return “element B and element A below ..” (both of them) or when you hover B, does it return “element A below”?

I have explored several methods, such as elementFromPoint () or the .droppable () method from jquery, but I cannot return - several elements - below any other (e.g. C to return both A and B below)

Another way I could imagine using this code is to override .droppable () and call it recursively, but at the moment I don't see how to do it. For example, when:

a) Dropping A, nothing is displayed (without the item below)

b) Drop B over A - “B on {A}” is displayed

c) Drop C over B - “C on {B, A}” (C finds B, which B finds A)

jQuery Javascript

Answer 1

, - - :

var bufferInteger = 0, dragParent = $( container ), dragChildren = {};
(function layerCalculation(){
    dragParent.find('.draggable').each(function(index, val){
        var child = $(val), 
          childOffset = {
            top    : child.offset().top,
            left   : child.offset().left,
            width  : child.width(),
            zIndex : child.css('z-index')
          };
        dragChildren[child.attr('id')].top = childOffset.top;
        dragChildren[child.attr('id')].left = childOffset.left;
        dragChildren[child.attr('id')].width = childOffset.width;
        dragChildren[child.attr('id')].zIndex = childOffset.zIndex;
    });
}());

function detectHover(ui){
    var currentlyOver,
        uiElement = ui.helper[0],
        underStacked = dragChildren, 
        draggedItem = {
        id     : uiElement.id,
        offset : {
            left : uiElement.offsetLeft,
            top  : uiElement.offsetTop
        }
    };
    underStacked.splice(understacked.indexOf(draggedItem.id), 1);

    for (var i in underStacked){
        if ((underStacked[i].left <= draggedItem.offsetLeft <= (underStacked[i].left - - underStacked[i].width)) {
            currentlyOver = underStacked.id;
        } else if (...) {
            // do some logic here to calculate draggedItem.offsetLeft + draggedItem.width
        }
    }
    if (typeof currentlyOver !== 'undefined'){
        return currentlyOver;
    } else {
        return false;
    }
}
$('.draggable').bind({
    dragstart : function(){
        layerCalculation();
    },
    dragend : function(){
        layerCalculation();
    },
    drag : function(event, ui){
        bufferInteger++;
        if (bufferInteger > 9){
            bufferInteger = 0;
            detectHover(ui);
            ...
            // do something with return ID here.
        }
    }
});