Relocating an HTML element without rerendering anything?


#1

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

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

Is there some way I can do this?

Thanks in advance,
Daniel :slight_smile:


#2

No worries, found this:

/*
This script is copyright © 2006 Elliot Swan under the
Creative Commons Attribution-ShareAlike 2.5 license:
http://creativecommons.org/licenses/by-sa/2.5/

More information on this script can be found at:
http://www.elliotswan.com/2006/04/12/move-and-copy/
*/

var Move = {

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

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

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

}