拖放时获取top DIV的ID

Question

在将另一个 DIV 拖放到上面时，我需要获取顶部 DIV 的 ID。当多个 DIV 在另一个之上时，就会出现此问题。底部 DIV，而不是顶部，总是 returned。

我已经尝试使用 event.target.id 和 elementFromPoint() 以及 return 底部 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>

Answer 1

您需要获取可拖动元素的坐标，而不是可放置元素的位置。

在您的示例中，您使用的是 $(this).position()，其中 this 指的是要放置可拖动元素的元素。您可以使用 event.toElement 获取对当前可拖动元素的引用，因此您可以使用 $(event.toElement).position() 检索可拖动元素的位置。这将解决第一个问题。

由于 elementFromPoint 将 return top-most 元素，它将 return 您当前正在拖动的元素，因为您传递的是当前元素的坐标你在拖。为了忽略您正在拖动的元素，您可以简单地在元素处于拖动状态时将 pointer-events: none 添加到该元素。您可以通过将 CSS 应用于 class .ui-draggable-dragging 来做到这一点，后者仅在拖动元素时应用。

Updated Example

$("#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;
}

拖放时获取top DIV的ID

Get ID of top DIV when dragging & dropping

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable