Move items within the DOM model?

@ArticSunDec 14.2006

Hi all!

I’ll keep it as simple as possible for now. I got a container DIV, which hold multiple other DIVs (say articles). Now it must become possible to move these articles within the main DIV. So… I move one article down in the list of DIVs within the container/wrapper.

[code=php]<div id=”wrapper”><div id=”article1″>abc</div><div id=”article2″>abc</div></div>[/code]

The “abc” is just a fill-up, the actual content is much more complex. I hope there is a way to put the 2nd div in front of the first div without copying the data etc.

So in DOM terms:
divWrapper.childNodes[0] // must become divWrapper.childNodes[1]
divWrapper.childNodes[1] // must become divWrapper.childNodes[0]

Hope anyone can help!

Thanks

to post a comment

JavaScript

8 Comments(s) _↴

@gil_davisDec 14.2006 — #

&lt;script&gt;
 function promote(it) {
 var wr = document.getElementById("wrapper")
 var fc = wr.firstChild;
 var tg = document.getElementById(it);
 wr.removeChild(tg);
 wr.insertBefore(tg, fc);
 }
 &lt;/script&gt;
 &lt;div id="wrapper"&gt;
 &lt;div id="article1"&gt;This is Article 1&lt;/div&gt;
 &lt;div id="article2"&gt;This is Article 2&lt;/div&gt;
 &lt;div id="article3"&gt;This is Article 3&lt;/div&gt;
 &lt;div id="article4"&gt;This is Article 4&lt;/div&gt;
 &lt;/div&gt;
 &lt;input type="button" value=" Promote Article 1 " onclick="promote('article1')"&gt;&lt;br&gt;
 &lt;input type="button" value=" Promote Article 2 " onclick="promote('article2')"&gt;&lt;br&gt;
 &lt;input type="button" value=" Promote Article 3 " onclick="promote('article3')"&gt;&lt;br&gt;
 &lt;input type="button" value=" Promote Article 4 " onclick="promote('article4')"&gt;&lt;br&gt;

@mrhooDec 14.2006 — #No need to use removeChild in a move-

You can get the ElementById in the method or pass the objects in the function call:

function putBefore(fromhoo,tohoo){

tohoo.parentNode.insertBefore(fromhoo, tohoo);

}

@ArticSunauthorDec 14.2006 — #Hmm, well this is going the right way. But the promote function puts the selected node in the top, while I want to swap elements... so node 3 must become node 2 and the other way around.

Also when I try out this function.. when you press the button of the upper node this node dissapears. But ok, I could determine which buttons should be shown etc.

I'm really looking for a SWAP function to swap two nodes (including their child nodes)... To stay at the example, I think I can manage to delete node 3, but how to put node 3 before node 2 after that?

Thanks

@ArticSunauthorDec 14.2006 — #@mrhoo: This seems to bee a better way to start of... but it doesn't work. Or somehow I get the idea it swaps the "article1" div with the "article2" div, but not all content of the divs?

It doesn't give an error.. it just doesn't swap.

At the moment I get a hang of the nodes with the getElementById() function... maybe this ain't the right way to do this?

[code=php]fromhoo = document.getElementById('divBlock0');[/code]

(if more info is needed... please ask..)

Thanks!

@mrhooDec 14.2006 — #//if you want to pass id strings instead of object references:

[CODE]function mr(hoo){
 if(!hoo) return false;
 if(typeof(hoo)== 'string'){
 hoo= document.getElementById(hoo);
 if(!hoo) return false;
 }
 var t= hoo.nodeType;
 return (t==1 || t==11)? hoo: false;
 }
 function swapDr(hoo1,hoo2){
 hoo1=mr(hoo1);
 hoo2=mr(hoo2);
 if(!hoo1 || !hoo2)return;
 var pa=hoo1.parentNode; 
 var el=hoo1.nextSibling;
 
  hoo2.parentNode.insertBefore(hoo1,hoo2);
  if(el) pa.insertBefore(hoo2,el);
  else pa.appendChild(hoo2);
 }[/CODE]

@ArticSunauthorDec 14.2006 — #I can't get it to work. I'll post a more complete overview. No errors, nothing... but they don't swap. Again thanks for you effort and help!

Javascript Code:

[code=php]
 
 function swapElements( ) {
 
  // Define fromhoo and tohoo (maybe later via parameters).
  fromhoo = document.getElementById('divBlock0');
  tohoo = document.getElementById('divBlock1');
 
  // Remove tinyMCE from textareas in the divBlocks, cause this seems to give some trouble.
  tinyMCE.execCommand('mceRemoveControl', false, fromhoo.childNodes[1].childNodes[0].id); 
  tinyMCE.execCommand('mceRemoveControl', false, tohoo.childNodes[1].childNodes[0].id); 
 
  // Define variables.
  var pa=fromhoo.parentNode;
  var el=fromhoo.nextSibling;
 
  // Swap.
  tohoo.parentNode.insertBefore(fromhoo, tohoo);
  pa.insertBefore(tohoo,el);
  if(el) pa.insertBefore(tohoo,el);
  else pa.appendChild(tohoo)
 
 }
 [/code]

And the DIV structure:

[code=php]
 <div id="divWrapper">
 <div id="divBlock0">
 <div id="divTitle0">
 Title 0
 </div>
 <div id="divContent0">
 // In here a TinyMCE textarea.
 </div>
 </div>
 <div id="divBlock1">
 <div id="divTitle1">
 Title 1
 </div>
 <div id="divContent1">
 // In here a TinyMCE textarea.
 </div>
 </div>
 </div>
 [/code]

@mrhooDec 14.2006 — #Sorry,Arc- My mistake...the code I gave you didn't allow for

swapping adjacent elements.This will swap the elements with

all of their contents.

You must wait until the document has loaded before it will

function correctly.

[CODE]function swapDr(hoo1,hoo2){ 
 var pa=hoo1.parentNode; 
 var el=hoo1.nextSibling;
 
  if(el==hoo2)el=hoo1; 
  hoo2.parentNode.insertBefore(hoo1,hoo2);
  if(el) pa.insertBefore(hoo2,el);
  else pa.appendChild(hoo2);
 }[/CODE]

@ArticSunauthorDec 14.2006 — #No problem mr. hoo, I'm gratefull (English? ?) for your help up till now. It seems so much like the right way to do it, but it doesn't work ?.

I've tried several things... he correctly gets the parent and the element etc... but the insertbefore doesn't seem to work.

Also in #JavaScript _↴

Help with code Basic jQuery color picker Hiding the URL in a new window

Success!

Help @ArticSun spread the word by sharing this article on Twitter...

Tweet This

Move items within the DOM model?

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Move items within the DOM model?

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴