wrong value for ui.position on position relative

Question

Please take a look of the following jsfiddle: http://jsfiddle.net/G5qBq/

This is my jQuery code:

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
          $('body').append('<br />top: '+ui.position.top);
          $('body').append('<br />left: '+ui.position.left);
      }
    });
  });

When I dropping the draggable item on the top left corner of the dropping area I want that the position will be 0px and 0px (I'm printing those values on dropping).

I can't remove the position relative, and I don't know how to fix the position.

Can you help me please?

Thanks

Answer 1

Using jQuery.offset() I was able to get a result close to the one you want: http://jsfiddle.net/G5qBq/3/

It's off by 10px in both top and left, and I'm unsure why.

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

        var droppableOffset = $('#droppable').offset();
        var draggablePos    = ui.position;

        $('#result').append('<p>#droppable top: ' + droppableOffset.top + 
                       "px left:" + droppableOffset.left +"px");
        $('#result').append('<p>#draggable top: ' + draggablePos.top + 
                       "px left:" + draggablePos.left +"px");
        $('#result').append('<p>#draggable relative to #droppable top: ' + (draggablePos.top - droppableOffset.top) + 
                       "px left:" + (draggablePos.left - droppableOffset.left)  +"px");
      }
   });
});

Update: fixed!

I threw away ui and just used a jquery selector for #draggable: http://jsfiddle.net/G5qBq/4/

This code does what you want:

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

        var droppableOffset = $('#droppable').offset();
        var draggablePos    = $('#draggable').offset();

        $('#result').append('<p>#droppable top: ' + droppableOffset.top + 
                       "px left:" + droppableOffset.left +"px");
        $('#result').append('<p>#draggable top: ' + draggablePos.top + 
                       "px left:" + draggablePos.left +"px");
        $('#result').append('<p>#draggable relative to #droppable top: ' + (draggablePos.top - droppableOffset.top) + 
                       "px left:" + (draggablePos.left - droppableOffset.left)  +"px");
      }
   });
});