Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Déplacer un objet DOM vers le haut

Déplacer un objet DOM vers le haut

05/13/2011 par Dux   -   4.3/5 (3 notes)

Lors d'un affichage sous forme de liste, il est parfois nécessaire de proposer le classement des lignes. Cette fonction permet de remonter un objet d'un niveau.
La vérification du nodeType sert à contourner un problème sous certains navigateurs qui prennent les retours chariots et espaces entre 2 éléments comme un "objet text".
Pour faire l'inverse, utilisez nextSibling

Demo.

With DIV (click on a row)
DIV 1
DIV 2
DIV 3


With TABLE TR
ROW 1
ROW 2
ROW 3

code source



 
function monte_o(idelm) {
   var
en = document.getElementById(idelm);
   var
test = en.previousSibling;
   if (
en.previousSibling){
       
en.parentNode.insertBefore(en,en.previousSibling);
       if (
test.nodeType == 3) {
           
monte_o(idelm);
       } else {
           
// action when the element is ascended
       
}
   }
}


<
div id="div1" onclick="monte_o(this.id)" style="background:cyan">DIV 1</div>
<
div id="div2" onclick="monte_o(this.id)" style="background:yellow">DIV 2</div>
<
div id="div3" onclick="monte_o(this.id)" style="background:magenta">DIV 3</div>

Testé avec Safari  Google Chrome  Firefox3  Firefox4  IE6  IE7  
Noter ce code     |     Copié : 20x

Commentaires pour Déplacer un objet DOM vers le haut

Aucun commentaire
Ajouter un commentaire Pseudo   Site
ZOOM