javascript - 相対位置の ui.position の値が間違っています

Question

次の jsfiddle をご覧ください: http://jsfiddle.net/G5qBq/

これは私のjQueryコードです:

$(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);
      }
    });
  });

ドラッグ可能なアイテムをドロップ領域の左上隅にドロップすると、位置が 0px と 0px になるようにします (ドロップ時にこれらの値を出力しています)。

相対位置を削除できず、位置を修正する方法がわかりません。

助けてください。

ありがとう