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