Question

So I have this project that im working on, and now im stuck 🙁

My problem is, when I drag and drop my item, I need to get/set its position relative to a container, not the entire body, so from what I understand I should use position(). I do this using

var pos=$(ui.helper).position();
objName = "#leaf"+counter++
$(objName).css({"left":pos.left,"top":pos.top});  

Although this introduces a jump just after I drag in the div.

I had this working which would give me absolute left and right values using var pos=$(ui.helper).offset(); and setting my containers (#treeContainer) CSS to NOT CONTAIN “position:relative;” although this gave me absolute values relative to the entire page!

Many thanks for any responses!

Answer 1

First, remove the positioning CSS on the #drag objects. Those values carrying over to the destination object, and conflicting with your goals there. Alternatively, you can reset those values to 0 in the JS code.

#drag1 {
    width:74px;
    height:111px;
    float:right;
    background-color:#0F3;
}

#drag2 {
    width:74px;
    height:111px;
    float:right;
    background-color:#3C9;
}

Next, in the JS, you need to offset your top and left values with the values from the parent container by using subtraction.

      var pos = $(ui.helper).offset();
      var treePos = $('#treeContainer').offset();
      objName = "#leaf" + counter++;
      $(objName).css({"left": pos.left - treePos.left, "top": pos.top - treePos.top}); 

After these changes, it works as it should. See http://jsbin.com/exoqu3/6 for an example.