Question

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.

It appears to be a simple requirement so not sure if I’m missing an obvious trick?

Apologies if the above isn’t clear, quite difficult to explain it well.

Thanks
Steve

ps. just the js code below, it’s not pretty and some of the values I’ve hard coded for now:

$(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
    }
  });
}

Answer 1

It seems like perhaps you should consider re-organizing your DOM. I don’t understand why you change position relative to absolute positioning for the start of the drag and then change that back to relative on drop. That’s a recipe for disaster as layouts get more complicated, naturally creating plenty of opportunity for your tags to jump around. If you checked in firebug, you’d find some children who are outside of their parents, which you probably didn’t expect if you were dropping on a parent.
If you are new to the world of types of positioning, and need to just get it done, stick to keeping these draggable elements absolute, this should minimise difficulties in predicting behavior. But to have nice sites at a variety of resolutions, you really should get to grips with how exactly a browser will place visible objects given their properties.

Good luck 🙂