Jquery/Javascript drag and drop one parent to another

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));
   开发者_StackOverflow     $(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
    }
  });
}

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 :)

When dragging an object jquery applies an offset, top/left, style directly to the element. If you are adding this draggable to a new container, the new container is the parent and the offsets will now be applied from the containers position, instead of the screen --- at least that is my interpretation.

Here is a workaround I've used: the helper clone receives the styling leaving your original element to be appended cleanly. The start/stop toggles the display, making it look like you are dragging the actual element.

$("#draggable").draggable({
    revert: 'invalid',
    helper: 'clone', 
    zIndex: 350, 
    start:  function() { $(this).toggle(); }, 
    stop:   function() { $(this).toggle(); } 
});
$("#droppable").droppable({
    accept: '#draggable',
    drop: function(event, ui) {
                // example of effecting parent
                // $(this).addClass('highlight').find('p').html('Dropped!');
                $(ui.draggable).draggable("destroy").appendTo($(this));
    }
});

This worked best for me.

$(function() {
    var unit;
    $(".unit").draggable();
    $("#rpgGrid td").droppable({
        drop : function(event, ui) {
            jQuery(ui.draggable).css({
                "top": "0",
                "left": "0"
            });
            $(this).append(ui.draggable, function() {
                $(ui.draggable).remove();
            });
        }
    });
});