錯誤值的位置

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（我正在刪除這些值的打印）。

我無法刪除相對位置，我不知道如何修復位置。

你能幫助我嗎？

感謝

Answer 1

使用jQuery.offset()我能夠去接近你想要的結果：http://jsfiddle.net/G5qBq/3/

它通過10px的是關在頂部和左，我不確定爲什麼。

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

更新：固定！

我扔掉了UI，只是用於#draggable jQuery選擇：http://jsfiddle.net/G5qBq/4/

此代碼你想要做什麼：

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