Trascinare le immersioni e memorizzare la posizione

Question

sto provando a fare uno script drag and drop ma sono bloccato. Quello che voglio ottenere è: voglio trascinare elementi da un lato e metterli in un div. Quando sposto l'elemento all'interno di quel div, la mia posizione sinistra e quella superiore dovrebbero essere calcolate dai bordi del div droppable non dell'intero documento. quindi posso organizzare e visualizzare i div trascinati nella posizione esatta anche dopo l'aggiornamento. La mia domanda è come posso ottenere la posizione di div e fare una chiamata ajax per memorizzarli nel database. Ecco il mio codice e 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

modificare i aggiornato il merluzzo, è riuscito a ottenere la posizione del div ma non lo prende dal bordo del div droppabile prende la posizione dall'intero documento

Answer 1

ok sono riuscito a farlo funzionare come dovrebbe, ecco jsfiddle e jquery se qualcun altro ha bisogno di questo in futuro. 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