multiple droppable

Question

我已經有多個droppable div（它們都具有相同的大小）和一個可拖動的div。可拖動的div比一個droppable大3倍。當我拖放可拖動div的拖放div時，我想查找哪個droppable已受到影響。

我的代碼如下所示：

$(function() { 

    $(".draggable").draggable({ 
     drag: function (event, ui) { } 

    }); 
    $(".droppable").droppable({ 
     drop: function (event, ui) { 
      alert(this.id); 
     } 
    }); 

}); 

的HTML

<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div0" class="droppable"> 
    drop in me1! 
</div> 
<div style="height:100px; width:200px; border-bottom:1px solid red;" id="Div1" class="droppable"> 
    drop in me2! 
</div> 
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div2" class="droppable"> 
    drop in me2! 
</div> 
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div3" class="droppable"> 
    drop in me2! 
</div> 
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div4" class="droppable"> 
    drop in me2! 
</div> 
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div5" class="droppable"> 
    drop in me2! 
</div> 
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div6" class="droppable"> 
    drop in me2! 
</div> 
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div7" class="droppable"> 
    drop in me2! 
</div> 


<div class="draggable" id="drag" style="height:300px; width:50px; border:1px solid black;"><span>Drag</span></div> 

但我的警報只顯示這我可拖動的div（DIV0）打第一個，我怎麼能找到失蹤（Div1構成和Div2），這也是感染？

下面是同樣的問題一個人：http://forum.jquery.com/topic/drop-onto-multiple-droppable-elements-at-once

Answer 1

也許這樣嗎？建立一個演示here。

$(".droppable").droppable({ 
    drop: function (event, ui) { 
     var $draggable = $(ui.draggable); 

     var draggableTop = $draggable.offset().top; 
     var draggableHeight = $draggable.height(); 
     var draggableBottom = draggableTop + draggableHeight; 

     $droppables = $(".droppable"); 

     $droppablesCoveredByDraggable = $droppables.filter(function() { 
      var $droppable = $(this); 
      var top     = $droppable.offset().top; 
      var height   = $droppable.height(); 
      var bottom   = top + height; 

      var isCoveredByDraggable = top <= draggableBottom && bottom >= draggableTop; 
      return isCoveredByDraggable; 
     }); 

     //example: mark the droppables that are covered 
     $droppables.removeClass("marked"); 
     $droppablesCoveredByDraggable.addClass("marked"); 
    } 
});