Boşlukları sürükleyip bırakın ve konum

Question

pozisyonunu sürükleyip bırakma komut dosyası yapmaya çalışıyorum ama sıkışmış durumdayım. Elde etmek istediğim şey: elemanları bir taraftan sürükleyip bir divun içine koymak istiyorum. Bu div içindeki elementi hareket ettirdiğimde, sol ve üst konumlar, tüm belgenin değil, atılabilir div'in kenarlarından hesaplanmalıdır. böylece sürüklendikten sonra bile sürüklenen div'leri tam olarak düzenleyebilir ve görüntüleyebilirim. Sorum şu ki, divların konumunu nasıl alabilirim ve ajax çağrısını veritabanında saklamak için nasıl yapabilirim. İşte benim kod ve jsfiddle geçerli:
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

düzenlemek i cod güncellendi, div pozisyon almak için başardı ama o not düşmüş bir kenarından almazsa o pozisyonu tüm belge

Answer 1

tamam alır gibi çalışmayı başardı, burada jsfiddle ve jquery bir başkasının buna ihtiyacı varsa. 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