How do I use jQuery to drag and drop a <div> at a particular position?
<p>I am not able to drag and drop a <code>&lt;DIV&gt;</code> in a particular position.</p>

<p>The <code>&lt;DIV&gt;</code>'s right now get added to the bottom of the previous <code>&lt;DIV&gt;</code> even if I move the first <code>&lt;DIV&gt;</code> away from the initial position.</p>

<p>For example:</p>

<p>Lets say each <code>&lt;DIV&gt;</code> <code>height = 50, width = 100</code>;</p>

<p>When I drop the first <code>&lt;DIV&gt;</code> it is dropped at position, say (10,10)</p>

<p>The next <code>&lt;DIV&gt;</code> gets dropped at (10,10+50).
The next one at (10,10+50+50).</p>

<p>I want all the <code>&lt;DIV&gt;</code>'s to drop at (10,60).</p>

<p>My drop function:</p>

<pre><code>drop: function(ev, ui) {
    if($(ui.draggable).is("img")){
        //$(this).css("position", "absolute");
        $(this).position().left = 85;
        $(this).position().top = 338;
        //$(this).css("position", "relative");
    }

});
</code></pre>

<p>If I set the position to absolute. It drops it at the position specified but further drag and drop does not happen.</p>

<p>Can you guys offer some help. Thanks in advance.</p>

<p>Update:
This is my html code with the three divs and the style for left div and right div. No particular style given to main div except height.</p>

<pre><code>&lt;div id="maindiv" style="height:500px"&gt;
  &lt;div id="left"&gt;
     &lt;img id="1" src="/1.png"/&gt;
     &lt;/div&gt; &lt;!-- Left Div End --&gt;
 &lt;div id="content"&gt;

 &lt;/div&gt; &lt;!-- Content End --&gt;
 &lt;/div&gt; &lt;!-- main div End--&gt;
</code></pre>

<p>Content style:</p>

<pre><code>content {
    border:2px solid #DFA214;
    float:right;
    height:400px;
    margin:1px;
    overflow:auto;
    position:relative;
    width:74%;
}
</code></pre>

<p>If I change the position to absolute then drag and drop does not work further:</p>

<pre><code>left {
    border:2px solid #DFA214;
    float:left;
    height:400px;
    margin:1px;
    position:relative;
    width:24%;
}
</code></pre>
