jQuery: repositioned relative to the viewport
<p>When the div has been dragged to the point when the scrolling appears and then is being resized, it forgets its actual position and is repositioned relative to the viewport. How to preserve its actual position?</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/&gt; 
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt; 
&lt;script&gt;
(function($){$(document).ready(function(){
    $('#theDiv').draggable().resizable();
})})(jQuery);   
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="container" style="position:relative;width:600px;height:600px;border:solid 1px #000;overflow:auto;"&gt;
        &lt;div id="theDiv" style="width:200px;height:200px;border:solid 1px #000;"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
