拖放div和商店位置

Question

我試圖做一個拖放腳本，但我被困住了。我想要實現的是：我想從一側拖動元素並將它們放入div中。當我移動該div內的元素時，我的左邊和頂部位置應該從可放置div的邊緣計算，而不是整個文檔。所以我可以安排並顯示拖動的div在確切的位置，即使刷新後。 我的問題是我如何獲得div的位置，並作出ajax調用來將它們存儲在數據庫中。這裏是我的代碼和的jsfiddle：
HTML

<div data-id="1" class="ui-widget-content draggable"> 
    <p>Drag me </p> 
</div> 
<div data-id="2" class="ui-widget-content draggable"> 
    <p>Drag me </p> 
</div> 
<div data-id="3" class="ui-widget-content draggable"> 
    <p>Drag me </p> 
</div> 
<div data-id="4" class="ui-widget-content draggable"> 
    <p>Drag me</p> 
</div> 
<div data-id="5" class="ui-widget-content draggable"> 
    <p>Drag me </p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 
<div id="pos"></div> 

JS

$(function() { 
    $(".draggable").draggable 
    (
    { 
     drag: function(){ 
      var pos=$(this).attr('style'); 
      $("#pos").html(pos); 
      } 
    }); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 

     } 
    }); 
    }); 

的jsfiddle jsfiddle

編輯 我更新的鱈魚，設法得到div的位置，但它並沒有把它從可放開div的邊緣需要的位置從整個文件

Answer 1

好，我設法使它的工作，因爲它應該，這裏是jsfiddle和jquery如果別人今後需要這個。 jQuery的

$(function() { 
    var pos=null; 
    var parent=null; 
    var current=null; 
    $(".draggable").draggable 
    (
    { 
     drag: function(){ 
      pos = $(this).offset(); 
      parent = $("#droppable").offset(); 
      current = {left: pos.left - parent.left, top: pos.top - parent.top }; 
      $("#pos").html(current.left + ', ' + current.top); 

      } 
    }); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
      $.ajax({ 
    method: "POST", 
    url: "insert.php", 
    data: { name: current.left, location: current.top } 
}) 

     } 

    }); 
    }); 

jsfiddle