title: Get ID of top DIV when dragging & dropping
body: <p>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.</p>
  
  <p>I've tried using event.target.id and elementFromPoint() and both return the bottom DIV (I've included both in the code below).</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/wibbleface/t33ej6rn/" rel="nofollow noreferrer">https://jsfiddle.net/wibbleface/t33ej6rn/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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);
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="application/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js" type="application/javascript"&gt;&lt;/script&gt;
  
  &lt;p&gt;Drag #box1 onto #box3. An alert will show that it's been dropped on #box3.
    &lt;br&gt;Next, drag #box2 onto #box1. The alert will show #box3.
    &lt;br&gt;I want it to be able to show the box immediately below it (ie #box2).&lt;/p&gt;
  &lt;div id="box1"&gt;#box1
    &lt;br&gt;First: drag me to #box3&lt;/div&gt;
  &lt;div id="box2"&gt;#box2
    &lt;br&gt;Second: drag me to #box1, which is on #box3.&lt;/div&gt;
  &lt;div id="box3"&gt;#box3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>