ドラッグされたオブジェクトの下に複数の要素を検出しますか？ Javascriptを/ jQueryの

Question

私はdinamicallyオブジェクトを作成し、jqueryの使用して、次のコードで、それは「ドラッグ可能」になり、ボタンがあります。

要素ID = divIdは持つ要素を作る

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

ドラッグ可能（jQueryのLIBSのおかげで）したがって、新しく作成された要素は、ページ内の任意の場所にドラッグ＆ドロップできます。

ここで、要素A、B、Cを作成し、それらをすべてドラッグできるとします。 「上」B、およびB上に紙シートが重なり合っているように、「上」に留まる）

どの要素がそれぞれの下にあるかを検出する方法はありますか？例えば、Cの上をホバリングすると、「要素Bと要素Aが下にあります」（両方とも）、またはホバリングBの場合は「要素Aは下にあります」が返されます。

jqueryのelementFromPoint（）や.droppable（）メソッドのようないくつかのメソッドを調べましたが、複数の要素を返すようには思えません。とBの下）

このコードで私が想像することのできる別の方法は、.droppable（）をオーバーライドして再帰的に呼び出すことですが、現在どのように表示されていません。例えば、場合：

それ以下

A）を滴下A、何も表示されません取得し（どの要素なし）

B）上にBの削除 - "Bを{A}の" 表示

C）を滴下C Bの上に - "にC {B、A}" jQueryのまたはネイティブJavascriptが大幅

Answer 1

を理解されるであろう

私はこれを行うための最善の方法は、あろう想像（CはAを見つけB Bは、発見します）次のようなことをする：

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