In the example

$(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> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> <div id="a1" > Drop here</div> </br></br></br></br></br></br></br> <div id="a2" > Drop here</div> </div>

How to define and memorize in a variable where the block is transferred to - in the div#a1 or #a2 ?

    1 answer 1

    If we take hr as a boundary, before A1 after A2 .

     $(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 >= hr.top) console.log('A2'); //---------------------------------------------------------------- console.log(pos); // <----- 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>

    PS: Full screen.

    • Is it possible to determine a location not by position, but by id? That is, check if id = "a1", perform one action, if id = "a2" is another. - olga_arb