# Relocating an HTML element without rerendering anything?

**URL:** <https://www.ruby-forum.com/t/relocating-an-html-element-without-rerendering-anything/90169>\
**Category:** Rails\
**Created:** [March 26, 2007, 4:22pm UTC](https://www.ruby-forum.com/t/relocating-an-html-element-without-rerendering-anything/90169 "2007-03-26T16:22:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/c57346/32.png) [@danielb](https://www.ruby-forum.com/u/danielb)\
**Post date:** [March 26, 2007, 4:22pm UTC](https://www.ruby-forum.com/t/relocating-an-html-element-without-rerendering-anything/90169/1 "2007-03-26T16:22:15Z")

</div>

Hey 🙂

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 🙂

---

<div class="post-metadata">

**Author:** ![danielb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/c57346/32.png) [@danielb](https://www.ruby-forum.com/u/danielb)\
**Post date:** [March 26, 2007, 5:41pm UTC](https://www.ruby-forum.com/t/relocating-an-html-element-without-rerendering-anything/90169/2 "2007-03-26T17:41:38Z")

</div>

No worries, found this:

/\*  
This script is copyright (c) 2006 Elliot Swan under the  
Creative Commons Attribution-ShareAlike 2.5 license:  
[http://creativecommons.org/licenses/by-sa/2.5/](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/](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);
    }
    }

```

}