How do I use jQuery to drag and drop a <div> at a particular position?

Question

I am not able to drag and drop a <DIV> in a particular position.

The <DIV>'s right now get added to the bottom of the previous <DIV> even if I move the first <DIV> away from the initial position.

For example:

Lets say each <DIV> height = 50, width = 100;

When I drop the first <DIV> it is dropped at position, say (10,10)

The next <DIV> gets dropped at (10,10+50). The next one at (10,10+50+50).

I want all the <DIV>'s to drop at (10,60).

My drop function:

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");
    }

});

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

Can you guys offer some help. Thanks in advance.

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.

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

 </div> <!-- Content End -->
 </div> <!-- main div End-->

Content style:

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

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

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

Answer 1

When you move relative you still occupy the original space (even if it appears empty). You need to change the elements logical position in the DOM instead.

Actually on re-reading your question you are moving relative so you need to account for the ORIGINAL position when setting a target position.

$(this).position().left = 85 - $(this).position().left;

Or something like that.

Answer 2

The properties top, bottom, left and right only work when position is set to fixed, absolute and relative. To set the element to a fixed position, the only way is to use absolute. Maybe the drag and drop must be changed.

Answer 3

Try putting all the divs you want to move in a container div. Each of the child divs should have relatve positioning. Then change parent's size.