Relocating an HTML element without rerendering anything?


Hey :slight_smile:

As some of you may know, I’m working on a drag-and-drop AJAX tree
manager. I’ve got it pretty much done now, except for the dropping of
one node onto another. I can relocate and save the node fine, but I’d
like to be able to move the node and have it placed inside a specific
inner div to where it’s dropped without having to reload the place
it’s dropped. As the drop target is a node, too, and might be expanded
at any number of levels, refreshing that node would kill this state,
leaving it either collapsed, or expanded at just one level.

On my drop_receiving_element, I’d like to be able to say something

:success => “Element.move_to(element_id, target_id)”

Is there some way I can do this?

Thanks in advance,
Daniel :slight_smile:


No worries, found this:

This script is copyright © 2006 Elliot Swan under the
Creative Commons Attribution-ShareAlike 2.5 license:

More information on this script can be found at:

var Move = {

copy  :   function(e, target)  {
    var eId      = $(e);
    var copyE    = eId.cloneNode(true);
    var cLength  = copyE.childNodes.length -1;     = e+'-copy';

    for(var i = 0; cLength >= i;  i++)  {
    if(copyE.childNodes[i].id) {
    var cNode   = copyE.childNodes[i];
    var firstId =;    = firstId+'-copy'; }
element:  function(e, target, type)  {
    var eId =  $(e);
    if(type == 'move') {

    else if(type == 'copy')  {
       this.copy(e, target);