js function not working properly, why?
<p>The  function isn't working when i'm using <code>$(document).ready(function () {  ..... });</code>
but it works when i invoke. please take a look.</p>

<pre><code>#test {height:25%,width:25% }

&lt;body&gt;
....
&lt;div id="test"&gt;
  &lt;image src="file.jpg" /&gt;
&lt;/div&gt;
...
&lt;/div&gt; &lt;/body&gt;
</code></pre>

<p><em><strong>js file (Not working) :</em></strong></p>

<pre><code>$(document).ready(function () { 
   $('#test').draggable();
 });
</code></pre>

<p><strong><em>js file (Working when a function is invoked)</em></strong></p>

<pre><code>function startDrag() {    // I just called this function from html files e.g. &lt;div id="test" onmouseover="startDrag();"&gt;....&lt;/div&gt;
 $('#test').draggable();
}
</code></pre>
