Jquery/Javascript drag and drop one parent to another
<p>I've been playing with JQuery UI draggable and have been struggling with maintaining element position when dragging an element from one parent to the other.  As soon as move the element to another parent it's positioning is way off.  I then proceeded to workout the offset and applied it to the element and it worked very well until I started styling the page and then everything was even worse then before.</p>

<p>It appears to be a simple requirement so not sure if I'm missing an obvious trick?</p>

<p>Apologies if the above isn't clear, quite difficult to explain it well.</p>

<p>Thanks
Steve</p>

<p>ps. just the js code below, it's not pretty and some of the values I've hard coded for now:</p>

<pre><code>$(document).ready(function() { 
  makeDraggable($(".draggable"));
});

function makeDraggable(el) {
  var clone ;
  var x = 0;
  var y = 0;
  $(el).draggable({
    zIndex: 1000,
    start:function() {
      if($(this).parent().parent().attr("id") == "browser") {
        clone = $(this).clone();
        makeDraggable($(clone));
        $(clone).css("position","absolute");
        $(clone).css("z-index","0");
        $(this).parent().append($(clone));
      } // end if
    },
    drag:function() {},
    stop:function() {
      if($(this).parent().parent().attr("id") == "browser") {
        var offset = 0;
        var total_item_width = parseInt($(this).css("padding-left"))+parseInt($(this).css("padding-right"))+$(this).width();

        $(clone).css("position","relative");
        $("#canvas").append($(this));

        offset = ($("#canvas").find(".draggable").size()-1)*total_item_width;  
        $(this).css("left",parseInt($(this).css("left"))+827-offset);

        offset = ($("#canvas").find(".draggable").size()-1)*($(this).height()+12);
        $(this).css("top",parseInt($(this).position().top));
      } // end if
    }
  });
}
</code></pre>
