檢測拖動對象下面的多個元素？使用Javascript/Jquery的

Question

我有一個按鈕，dinamically創建一個對象和使用jquery使得「拖動」用下面的代碼：

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

這使得元件與元素ID = DIVID拖動（感謝jquery的LIBS） ，所以任何新創建的元素都可以被拖放到頁面的任何位置

現在，假設我創建了元素A，B和C，它們都是可拖動的，並且拖動n'將其拖放到另一個之上（所以C保留「超過」B，並且B保持「超過」A，就像紙張堆疊在另一個之上一樣）

是否有任何方法可以檢測到每個元素下面的元素？例如，當將鼠標懸停在C上時，它會返回一個「元素B和元素A在...下面」（它們都是），或者當將鼠標懸停在B上時，它會返回「元素A在下面」？我調查了像jQuery的elementFromPoint（）或.droppable（）方法的幾個方法，但我似乎無法返回 - 多個元素 - 下面的任何其他（例如C返回兩個A和B下面）

我可以想象這個代碼的另一種方式是重寫.droppable（）並遞歸地調用它，但目前我沒有看到如何。例如，當：

一個）滴A，沒有獲取顯示（不低於它元件）

b）中刪除B經A - 「是在{A} B」 顯示

c）中滴Ç乙級以上 - 「C上{B，A}」（C發現B，其中B發現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. 
     } 
    } 
});