Перетаскивание divs и позиция магазина

Question

Я пытаюсь сделать перетаскивание, но я застрял. Я хочу достичь: я хочу перетаскивать элементы с одной стороны и помещать их в div. Когда я перемещаю элемент внутри этого div, моя левая и верхняя позиции должны вычисляться по краям отбрасываемого div не всего документа. поэтому я могу организовать и отображать перетаскиваемые divs в точной позиции даже после обновления. Мой вопрос в том, как я могу получить позицию divs и сделать 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