javascript - 检测拖动对象下方的多个元素？ Javascript/Jquery

Question

我有一个按钮，它动态创建一个对象并使用 jquery 使用以下代码使其“可拖动”:

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

这使得元素 Id = divId 的元素可拖动(感谢 jquery 库)，因此任何新创建的元素都可以拖放到页面中的任何位置

现在，假设我创建了元素 A、B 和 C，它们都是可拖动的，我将一个元素拖放到另一个元素之上(因此 C 保持在 B 上方，B 保持在 A 上方，就像纸一样床单堆叠在一起)

有什么方法可以检测每个元素下面有哪些元素吗？例如，当鼠标悬停在 C 上时，它会返回“元素 B 和元素 A 在下方……”(两者)，或者当鼠标悬停在 B 上时，它会返回“元素 A 在下方”？

我研究了一些方法，如 elementFromPoint() 或 jquery 的 .droppable() 方法，但我似乎无法返回 --multiple elements-- 低于任何其他方法(例如 C 返回 A 和B 在它下面)

我可以使用此代码想象的另一种方法是覆盖 .droppable() 并递归调用它，但目前我不知道如何操作。例如，当:

a) 放下 A，什么都不会显示(下面没有元素)

b) 将 B 放在 A 上 - 显示“{A} 上的 B”

c) Drop C over B - “C on {B,A}”(C 找到 B，B 找到 A)

jQuery 或 native 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.
        }
    }
});