How to get relative position of a draggable item when dropped?
<p>I have the following:</p>

<pre><code>    $(function() {
    // Make images draggable.
    $(".item").draggable({

    // Find position where image is dropped.
    stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
    }

    });
});
</code></pre>

<p>This will get the position of the item when I drop it, but it is relative to the browser window, not the div they are within.  How can I get their relative position?</p>

<p>edit-> Here is the html/css:</p>

<pre><code>&lt;style type="text/css"&gt;

.container {
    margin-top: 50px;
    cursor:move;
}
#screen {
    overflow:hidden;
    width:500px;
    height:500px;
    clear:both;
    border:1px solid black;
}                              

&lt;/style&gt;

&lt;body&gt;

&lt;div class="container"&gt;

    &lt;div id="screen"&gt;
      &lt;img id="productid_1" src="images/KeypadLinc OFF.jpg" class="item" alt="" title="" /&gt;
      &lt;img id="productid_2" src="images/KeypadLinc ON.jpg" class="item" alt="" title="" /&gt;
    &lt;/div&gt;

&lt;/div&gt;


&lt;div id="stop"&gt;Waiting image getting dropped...&lt;/div&gt;
&lt;/body&gt;
</code></pre>
