In jQuery, what's the proper way to “move” an element from its parent to another element?

Question

Using jQuery 1.4 and jQueryUI 1.8

Specifically, I'm using draggables/droppables, and when dropped, I would like to move the draggable (it's children, events, etc) from belonging to its parent element to be appended/added as a child of the drop target.

I know that in the droppable drop option, I can supply the following callback:

function(event, ui) {
    // stuff
}

where $(this).target will be the drop target, and ui.draggable will be the child element I would like to move - but I'm not sure the proper way to actually perform the move, preserving events, etc.

Answer 1

append() will remove the element and place it where you want.

$(this).target.append(ui.draggable);

// or, if $(this).target is not a jQuery object

var target = $(this).target;
$(target).append(ui.draggable);

Answer 2

Just use .append() , .appendTo() , .prepend() or .prependTo() . The detaching part is implicit. (I tested this by re-parenting entries in the jQuery Manipulation docs to each other.)

ui.draggable.appendTo($(this).target);