how to get xy coordinate of an image after drag and drop in jquery?
<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>
