divs और store position

Question

खींचें और छोड़ें मैं ड्रैग और ड्रॉप स्क्रिप्ट बनाने की कोशिश कर रहा हूं लेकिन मैं फंस गया हूं। मैं जो हासिल करना चाहता हूं वह है: मैं तत्वों को एक तरफ खींचना चाहता हूं और उन्हें एक div के अंदर रखना चाहता हूं। जब मैं उस div के अंदर तत्व को स्थानांतरित करता हूं तो मेरी बाईं और शीर्ष स्थिति को ड्रॉपप्रेबल div के किनारों से गणना की जानी चाहिए, पूरे दस्तावेज़ में नहीं। इसलिए मैं रीफ्रेश के बाद भी सटीक स्थिति पर ड्रैग किए गए divs को व्यवस्थित और प्रदर्शित कर सकता हूं। मेरा सवाल यह है कि मैं divs की स्थिति कैसे प्राप्त कर सकता हूं और डेटाबेस में उन्हें स्टोर करने के लिए AJAX कॉल कैसे कर सकता हूं। यहाँ मेरी कोड और 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

$(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 की स्थिति प्राप्त करने में कामयाब रहा, लेकिन यह ड्रॉपप्रेबल 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