我有多个可放置的 div(它们都具有相同的大小)和一个可拖动的 div。可拖动的 div 比可放置的 div 大 3 倍。当我将可拖动的 div 拖动到可转换的 div 上时,我想找到哪个可转换的已受到影响。
我的代码如下所示:
$(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
最佳答案
也许像这样?放一个演示 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");
}
});
关于jquery - 多个可转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2985713/