title: how to get xy coordinate of an image after drag and drop in jquery?
body: <p>I have a problem getting the x y coordinates of a rectangle.</p>
  
  <p>Actually I already get the x y coordinate, but it is not correct.. I used visual studio 2008.. n using jquery..ok, the design is like this:</p>
  
  <p>I had a div name "drg".. that is a big box.. inside the div(the big box) there is an image that is the rectangle. I drag the rectangle to the end top left of the div but the result for x=8, n y=8.. Logically the code  counts from the out of the div.. Thats why got x=10 n y=10.</p>
  
  <p>I want when drag to the end top left of the div, the result must be x=0,y=0.. </p>
  
  <p>This is my code: "im" is the id of image(red box)</p>
  
  <pre><code>$(document).ready(function() {
      // sets draggable the elements with id="im"
      $('#im').draggable({
          cursor: 'move',        // sets the cursor apperance
          containment: '#drg', 
  
          stop : function(){
              $("#value").text('x-axis :' + $('#im').offset().left + 'y-axis :' + $('#im').offset().top);
  
              var imgPosX = 10 - $("img#im").width();
              var imgPosY = 10 - $("img#im").height();
  
          }
      });
  });
  </code></pre>
  
  <p>When I drag the image(red box)to the top left, it get x=8,y=8...it counts from out of the blue box..I want it to count from in the blue box n get x=0,y=0 if the position of the image(red box) is like that.</p>