ドラッグ＆ドロップのdivとストアの位置

Question

ドラッグ＆ドロップスクリプトを作成しようとしていますが、私は固執しています。私は達成したいです：私は片側から要素をドラッグし、divの中に入れたいです。 div内の要素を移動するとき、左上の位置はドキュメント全体ではなく、ドロップ可能なdivの端から計算する必要があります。だから私は、リフレッシュした後でもドラッグされたdivを正確な位置に配置して表示することができます。 私の質問はどのようにdivの位置を取得し、データベースに格納するajax呼び出しを行うことができますです。ここに私のコードとjsfiddleです：
HTML

$(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

<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が jsfiddle

編集 I codを更新し、divの位置を取得するように管理しましたが、削除可能なdivの端から取得しません。文書全体から位置をとります。

Answer 1

okこれは正常に動作するように管理されています。 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