Ziehen Sie divs und speichern Sie Position

Question

Ich versuche, ein Drag-and-Drop-Skript zu machen, aber ich bin stecken geblieben. Was ich erreichen möchte, ist: Ich möchte Elemente von einer Seite ziehen und sie in ein Div einfügen. Wenn ich das Element innerhalb dieses div verschiebe, sollte meine linke und obere Position von den Kanten des abwerfbaren div nicht das gesamte Dokument berechnet werden. so kann ich selbst nach dem Refresh Drag Divs an der exakten Position anordnen und anzeigen lassen. Meine Frage ist, wie kann ich die Position von divs bekommen und einen Ajax-Aufruf machen, um sie in der Datenbank zu speichern. Hier ist mein Code und 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

bearbeiten i aktualisiert den Kabeljau, schaffte es, die Position des div zu bekommen, aber es nimmt es nicht von der Kante des dropable div es nimmt die Position aus dem gesamten Dokument

Answer 1

ok ich schaffte es zu machen, wie es soll, hier ist jfiddle und jquery, wenn jemand anderes dies in der Zukunft braucht. 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