多个可丢弃答案

【问题标题】：multiple droppable多个可丢弃
【发布时间】：2010-06-06 20:05:43
【问题描述】：

我有多个可放置的 div（它们都具有相同的大小）和一个可拖动的 div。可拖动的 div 比一个可放置的 div 大 3 倍。当我在 droppables 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

【问题讨论】：

标签： jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

也许是这样的？放个demo 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");
    }
});

【讨论】：