jQuery-UI ड्रैगगेबल: एक डीआईवी कंटेनर

Question

के सापेक्ष समन्वय प्रिंट करें यह demo दिखाता है कि jQuery का उपयोग करके घटक खींचते समय ईवेंट कैसे भेजें। मेरे पास DIV के अंदर एक घटक है, और जब मैं उस घटक को खींचता हूं तो मैं घटक संबंधितDIV कंटेनर के समन्वय को मुद्रित करना चाहता हूं, क्या कोई jQuery समर्थक यहां मेरी सहायता कर सकता है। यहां तक ​​कि मुझे अब तक क्या मिला है।

<div id="container" style="width: 400px; height: 4000px; border: 1px solid black;" > 
    <div id="draggable" style="width: 150px; height: 150px; background-color: black; cursor: move;"> 
     <div class="count"/>    
    </div> 
</div> 
<script>    
    jQuery(function(){         
     jQuery("#draggable").draggable({ 
      containment: "#contain", 
      scroll: false, 
      drag: function(){ 

      } 
     }); 
     function updateCoordinate(newCoordinate){ 
      jQuery(".count").text(newCoordinate); 
     } 
    }); 
</script> 

खींचें के लिए कॉलबैक घटना में, मैं घटक के रिश्तेदार की स्थिति पता लगाने के लिए जब मैं खींचें pageX, pageY यह पता लगाने की रूप में अच्छी तरह offsetX, offsetY के रूप में की जरूरत है। मैं jQuery के लिए बहुत नया हूँ। मुझे पता है कि मैं pageX, pageY और offsetX, offsetY दोनों इस

jQuery("#container").click(function(event){ 
    var offset = jQuery(this).offset(); 
    var pageX = event.pageX; 
    var pageY = event.pageY; 
}); 

की तरह प्राप्त कर सकते हैं, लेकिन मैं कैसे उन्हें एक साथ गठबंधन करने के लिए यकीन नहीं है।

Answer 1

इस तरह?

http://jsfiddle.net/aasFx/36/

$(function() { 
    $("#draggable").draggable({ 
     containment: "#contain", 
     scroll: false, 
     drag: function() { 
      var $this = $(this); 
      var thisPos = $this.position(); 
      var parentPos = $this.parent().position(); 

      var x = thisPos.left - parentPos.left; 
      var y = thisPos.top - parentPos.top; 

      $this.text(x + ", " + y); 
     } 
    }); 
});​ 

Answer 2

आपको क्या करने की 'स्थिति: रिश्तेदार' के लिए पैरेंट कंटेनर सीएसएस सेट किया गया है चाहते हो सकता है, और 'स्थिति: पूर्ण' को 'खींचने योग्य आइटम'। फिर, $ (यह) .position() जैसी चीजों का उपयोग करना। बाएं/शीर्ष पैरेंट कंटेनर के सापेक्ष होंगे।

यहां देखें: http://jsfiddle.net/bTULc/1/