multiple droppable
- by Sune
Ive have multiple droppable divs (which all have the same size) and one draggable div. The draggable div is 3 times bigger than one droppable. When I drag the draggable div on the droppables divs I want to find which droppable has been affeckted.
My code looks like this:
$(function () {
$(".draggable").draggable({
drag: function (event, ui) { }
});
$(".droppable").droppable({
drop: function (event, ui) {
alert(this.id);
}
});
});
the 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 alert only shows the first which my draggable div (Div0) hits, how can I find the missing (Div1 and Div2), which also is affeckted??
Here's a guy with the same problem : http://forum.jquery.com/topic/drop-onto-multiple-droppable-elements-at-once
