Получить идентификатор верхнего DIV при перетаскивании и удалении

Question

Мне нужно получить идентификатор верхнего DIV при перетаскивании другого DIV на него. Проблема возникает, когда есть более одного 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>

Answer 1

Вам нужно получить координаты перетаскиваемого элемента, а не положение сбрасываемого элемента.

В вашем примере вы используете $(this).position(), где this относится к элементу, в котором вы удаляете перетаскиваемый элемент. Вы можете получить ссылку на текущий перетаскиваемый элемент с event.toElement, поэтому вы можете использовать $(event.toElement).position(), чтобы получить позицию перетаскиваемого элемента. Это решит первый выпуск.

С elementFromPoint вернет самый верхний элемент, он вернет элемент, который вы сейчас перетаскиваете, так как вы передаете координаты текущего элемента, который вы перетаскиваете. Чтобы игнорировать элемент, который вы перетаскиваете, вы можете просто добавить pointer-events: none к элементу, пока он находится в состоянии перетаскивания. Вы можете сделать это, применив CSS к классу .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; 
}