Question

I need to know where the user drops the element. How do I echo both the .left and .top position on drop?

<div id="Draggable" style="position: fixed;">
<img src="images/door1.jpg" id="door">
</div>

<script type="text/javascript">
$( init );

function init() {
$('#Draggable').draggable();
$('body').droppable( {
drop: function(event, ui){
// ECHO POSITION
}
} );
}
</script>

Answer 1

Use ui.position which will gives { top, left } relative to the offset element. inside drop callback. ui.offset is also there which again gives the same { top, left } relative to the page.

function init() {
   $('#Draggable').draggable();
   $('body').droppable( {
     drop: function(event, ui){
        // ECHO POSITION
        alert(ui.position.top);
        alert(ui.position.left);

      }
   });
}