拖放時獲取頂部 DIV 的 ID

Question

將另一個 DIV 拖放到上面時，我需要獲取頂部 DIV 的 ID。 當多個 DIV 位於另一個 DIV 之上時，就會出現此問題。 始終返回底部 DIV，而不是頂部。

我試過使用 event.target.id 和 elementFromPoint() 並且都返回底部 DIV（我已將兩者都包含在下面的代碼中）。

小提琴： 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 ，因此您可以使用$(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;
}