拖放div和存储位置

Question

我正试图制作一个拖放脚本,但我被困了.我想要实现的是:我想从一侧拖动元素并将它们放在div中.当我在div中移动元素时,我的左侧和顶部位置应该从droppable div的边缘计算,而不是整个文档.所以即使刷新后我也可以在正确的位置安排和显示拖动的div.我的问题是如何获得div的位置并进行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的位置,但它不从droppable 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