Multiple discarded

Question

I have several droppable divs (they all have the same size) and one divgable div. A draggable div is 3 times larger than one droppable. When I drag a draggable div into droppables divs, I want to find which droppable has been affected.

My code is as follows:

$(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> 

But my warning shows only the first one on which the div divable div (Div0) drags me, how can I find the missing one (Div1 and Div2), which also affects ???

Here is a guy with the same problem: http://forum.jquery.com/topic/drop-onto-multiple-droppable-elements-at-once

Answer 1

Maybe so? Add a 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"); } });