Javascript 相对位置上ui.position的值错误

请查看以下JSFIDLE：

这是我的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);
      }
    });
  });

$（函数（）{
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（本）
.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）；
$（'body'）.append（'
top:'+ui.position.top）；
$（'body'）.append（'
左：'+ui.position.left）；
}
});
});

当我在放置区域的左上角放置可拖动项时，我希望位置为0px和0px（我在放置时打印这些值）

我不能移除相对位置，我也不知道如何固定位置

你能帮我吗

谢谢

使用我可以得到接近您想要的结果：

它的顶部和左侧都有10像素的偏差，我不确定为什么

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

$（函数（）{
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（this.addClass（“ui状态突出显示”）.find（“p”）.html（“已删除”）；
var droppableOffset=$（'#droppable'）.offset（）；
var draggablePos=ui.position；
$（'#result'）。追加（'#可拖放顶部：'+droppableOffset.top+
“px left:”+droppableOffset.left+“px”）；
$（“#result”）.append（“#可拖动top:”+draggablePos.top+
“px左：”+DRAGABLEPOS.left+“px”）；
$（“#result”）.append（“#可拖动相对于#可拖放top:”+（draggablePos.top-dropableoffset.top）+
“px左：”+（Dragablepos.left-DropableOffset.left）+“px”）；
}
});
});

更新：修正！ 我抛弃了ui，只使用jquery选择器来实现#可拖动：

此代码符合您的要求：

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

$（函数（）{
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（this.addClass（“ui状态突出显示”）.find（“p”）.html（“已删除”）；
var droppableOffset=$（'#droppable'）.offset（）；
var draggablePos=$（'#draggable'）.offset（）；
$（'#result'）。追加（'#可拖放顶部：'+droppableOffset.top+
“px left:”+droppableOffset.left+“px”）；
$（“#result”）.append（“#可拖动top:”+draggablePos.top+
“px左：”+DRAGABLEPOS.left+“px”）；
$（“#result”）.append（“#可拖动相对于#可拖放top:”+（draggablePos.top-dropableoffset.top）+
“px左：”+（Dragablepos.left-DropableOffset.left）+“px”）；
}
});
});

您希望Dropable在删除后做什么？