在将另一个 DIV 拖放到上面时,我需要获取顶部 DIV 的 ID。当多个 DIV 位于另一个之上时,就会出现此问题。始终返回底部 DIV,而不是顶部。
我已经尝试使用 event.target.id 和 elementFromPoint() 并且都返回了底部的 DIV(我在下面的代码中都包含了这两个)。
fiddle :https://jsfiddle.net/wibbleface/t33ej6rn/
$(function() {
$("#box1, #box2").draggable();
$("#box2, #box3").droppable({
drop: function(event, ui) {
var dropPosition = $(this).position();
var elem = document.elementFromPoint(dropPosition.left, dropPosition.top).id;
var target_id = event.target.id;
alert("Dropped onto #" + elem + " / #" + target_id + " Left: " + dropPosition.left + " Top: " + dropPosition.top);
}
});
});
#box1,
#box2,
#box3 {
position: static;
}
#box1 {
width: 220px;
height: 220px;
background-color: #fdd;
}
#box2 {
width: 200px;
height: 200px;
background-color: #dfd;
}
#box3 {
width: 240px;
height: 240px;
background-color: #ddf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="application/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js" type="application/javascript"></script>
<p>Drag #box1 onto #box3. An alert will show that it's been dropped on #box3.
<br>Next, drag #box2 onto #box1. The alert will show #box3.
<br>I want it to be able to show the box immediately below it (ie #box2).</p>
<div id="box1">#box1
<br>First: drag me to #box3</div>
<div id="box2">#box2
<br>Second: drag me to #box1, which is on #box3.</div>
<div id="box3">#box3</div>
最佳答案
您需要获取可拖动元素的坐标,而不是可放置元素的位置。
在您的示例中,您使用的是 $(this).position()
,其中 this
指的是要放置可拖动元素的元素。您可以使用 event.toElement
获取对当前可拖动元素的引用,因此您可以使用 $(event.toElement).position()
来检索可拖动元素的位置元素。这将解决第一个问题。
由于 elementFromPoint
将返回最顶层的元素,因此它将返回您当前正在拖动的元素,因为您传递的是您正在拖动的当前元素的坐标。为了忽略您正在拖动的元素,您可以简单地将 pointer-events: none
添加到处于拖动状态的元素。您可以通过将 CSS 应用到类 .ui-draggable-dragging
来做到这一点,该类仅在元素被拖动时应用。
$("#box1, #box2").draggable();
$("#box2, #box3").droppable({
drop: function(event, ui) {
var position = $(event.toElement).position();
var element = document.elementFromPoint(
position.left,
position.top
);
if (element) {
alert(element.id);
}
}
});
.ui-draggable-dragging {
pointer-events: none;
}
关于javascript - 拖放时获取top DIV的ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41925200/