Kéo và thả div và vị trí cửa hàng

Question

Tôi đang cố gắng tạo tập lệnh kéo và thả nhưng tôi bị kẹt. Những gì tôi muốn đạt được là: tôi muốn kéo các yếu tố từ một bên và đặt chúng bên trong một div. Khi tôi di chuyển phần tử bên trong div đó, vị trí trên cùng và bên trái của tôi sẽ được tính từ các cạnh của div có thể phân tách chứ không phải toàn bộ tài liệu. vì vậy tôi có thể sắp xếp và hiển thị các div được kéo ở vị trí chính xác ngay cả sau khi làm mới. Câu hỏi của tôi là làm thế nào tôi có thể nhận được vị trí của divs và thực hiện một cuộc gọi ajax để lưu trữ chúng trong cơ sở dữ liệu. Đây là mã và jsfiddle tôi:
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

chỉnh sửa i cập nhật các cod, quản lý để có được vị trí của div nhưng nó không lấy nó từ các cạnh của div droppable nó mất vị trí từ toàn bộ tài liệu

Answer 1

ok tôi quản lý để làm cho nó làm việc như nó phải, đây là jsfiddle và jquery nếu ai đó cần điều này trong tương lai. 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