drag&drop как узнать, куда перемещен элемент?

Question

В примере

$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
   <div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
    </div>
&lt;div id="droppable" class="ui-widget-header"&gt;

&lt;p&gt;Drop here&lt;/p&gt;

&lt;div id="a1" &gt; Drop here&lt;/div&gt;
           &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
&lt;div id="a2" &gt; Drop here&lt;/div&gt;
&lt;/div&gt;</code></pre>

Как определить и запомнить в переменной, куда перенесен блок - в div#a1 или #a2?

Answer 1

Если взять hr как границу, до А1 после А2.

$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
    // Куда перемещен ui.position
    var pos = ui.position; // Переменная
    var a1 = $('#a1').position();
    var a2 = $('#a2').position();
    var hr = $('hr').position();
    //----------------------------------------------------------------
    // 
    if(pos.top <= hr.top)
      console.log('A1');
if(pos.top &gt;= hr.top)
  console.log('A2');
//----------------------------------------------------------------


console.log(pos); // &lt;----- Position
  $(this)
    .addClass("ui-state-highlight")
    .find("p")
    .html("Dropped!");
}

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">

  <p>Drop here</p>

  <div id="a1"> Drop here</div>
  </br>
  </br>
  </br>
  <!-------- a1 -------->
  <hr>
  <!-------- a2 -------->
  </br>
  </br>
  </br>
  </br>
  <div id="a2"> Drop here</div>
</div>

P.S.: На весь экран.