Get ID of top DIV when dragging & dropping

Question

I need to get the ID of the top DIV when dragging and dropping another DIV onto it. The issue occurs when there is more than one DIV on top of another. The bottom DIV, rather than the top, is always returned.

I've tried using event.target.id and elementFromPoint() and both return the bottom DIV (I've included both in the code below).

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

You need to get the coordinates of the draggable element rather than the position of the droppable element.

In your example, you are using $(this).position() , where this refers to the element in which you are dropping the draggable element. You can get a reference to the current draggable element with event.toElement , therefore you can use $(event.toElement).position() to retrieve the position of the draggable element. That will resolve the first issue.

Since elementFromPoint will return the top-most element, it will return the element that you are currently dragging since you are passing the coordinates of the current element that you are dragging. In order to ignore the element that you are dragging, you could simply add pointer-events: none to the element while it is in the drag state. You can do this by applying the CSS to the class .ui-draggable-dragging which is only applied while the element is being dragged.

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;
}