title: jQuery-UI Draggable: Print out the coordinate relative to a DIV container
body: <p>This <a href="http://jqueryui.com/demos/draggable/#events" rel="noreferrer">demo</a> shows how send event when dragging the component around using jQuery. I have a component inside a <code>DIV</code>, and when I drag that component I want to print out the coordinate of the component <strong>relative</strong> to the <code>DIV</code> container, can any jQuery pro help me out here. Here is what I got so far.</p>
  
  <pre><code>&lt;div id="container" style="width: 400px; height: 4000px; border: 1px solid black;" &gt;
      &lt;div id="draggable" style="width: 150px; height: 150px; background-color: black; cursor: move;"&gt;
          &lt;div class="count"/&gt;               
      &lt;/div&gt;
  &lt;/div&gt;  
  &lt;script&gt;            
      jQuery(function(){                                
          jQuery("#draggable").draggable({
              containment: "#contain",
              scroll: false,
              drag: function(){
  
              }
          });
          function updateCoordinate(newCoordinate){
              jQuery(".count").text(newCoordinate);
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>In the callback event for drag, I need to figure out the <code>pageX, pageY</code> as well as the <code>offsetX, offsetY</code> to find out the relative position of the component when i drag. I am very new to jQuery. I know that I can obtain the both <code>pageX, pageY</code> and <code>offsetX, offsetY</code> like this</p>
  
  <pre><code>jQuery("#container").click(function(event){
      var offset = jQuery(this).offset();
      var pageX = event.pageX;
      var pageY = event.pageY;
  });
  </code></pre>
  
  <p>but I am not sure how to combine them together.</p>