11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Transvaser un élément HTML d'un élément parent à un autre

Hola tout le monde,

un petit soucis m'amène.

J'ai un premier élément (zone1) et un second (zone2)

Dans zone1, j'ai des éléments, je veux que lorsque je clique dessus, ces éléments deviennent des enfants de zone2.
Jusque là j'ai fait un truc qui crée un nouvel élément dans zone2 et supprime l'élément de zone1, ça fonctionne, c'est bien, mais impossible de faire l'opération inverse.

L'évènement onclick étant généré sur les éléments de la zone1, ceux de la zone2 ne sont donc pas gérés Smiley ohwell

En fait, il faudrait faire une sorte de déplacement d'élément dans le code source plutôt que de création/suppression... enfin, je sais pas trop...

Si vous voyez la marche à suivre, ça serait top !
++
Modifié par Olivier (16 Apr 2006 - 14:10)
Bonjour,
Est-ce que tu as essayé de :
1. Récupérer l'élément que tu veux déplacer et le stocker dans une variable
2. Supprimer l'élément du parent zone1 (removeChild)
3. Et l'ajouter au nouveau parent zone2 (appendChild/insertBefore).
une possibilité:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title> 

<style type="text/css">

#c {
margin:100px;
}

#c ul {
padding:0px; 
margin:10px;
border:1px solid;
width:200px;
list-style-type:none;
text-align:center;
float:left;
}

#c li {
width:200px;
}

</style>

</head> 

<body> 

<div id="c">
	<ul id="z1">
		<li>un</li>
		<li>deux</li>
		<li>trois</li>
		<li>quatre</li>
		<li>cinq</li>
	</ul>
	<ul id="z2">
		<li>six</li>
		<li>sept</li>
		<li>huit</li>
		<li>neuf</li>
		<li>dix</li>
	</ul>
</div>

<script type="text/javascript">

var t=[document.getElementById("z1"),document.getElementById("z2")];

for(n in t){
	ch=t[n].getElementsByTagName("li");
	for(o in ch){
		ch[o].ind=n;
		ch[o].onclick=function(){
			t[Math.abs(this.ind-1)].appendChild(this)
		}
	}
}

</script> 

</body> 
</html>
erratum:

en fait, la propriété ind doit être donnée à la liste, non à chaque ligne (sinon, évidemment, la ligne garde son indice de départ, ce qu'il faut justement éviter...)

<script type="text/javascript">

var t=[document.getElementById("z1"),document.getElementById("z2")];
var ch;

for(n in t){
	t[n].ind=n;
	ch=t[n].getElementsByTagName("li");
	for(o in ch){		
		ch[o].onclick=function(){
			t[Math.abs(this.parentNode.ind-1)].appendChild(this)
		}
	}
}

</script>
Javatwister a écrit :
erratum:

en fait, la propriété ind doit être donnée à la liste, non à chaque ligne (sinon, évidemment, la ligne garde son indice de départ, ce qu'il faut justement éviter...)

<script type="text/javascript">

var t=[document.getElementById("z1"),document.getElementById("z2")];
var ch;

for(n in t){
	t[n].ind=n;
	ch=t[n].getElementsByTagName("li");
	for(o in ch){		
		ch[o].onclick=function(){
			t[Math.abs(this.parentNode.ind-1)].appendChild(this)
		}
	}
}

</script>


Wa, nickel ! Smiley smile
Je suis pas sûr d'avoir pigé, je vais reprendre ça calmement mais ça semble fonctionner impec' !
euh oui... question anti-ergonomie du code, j'ai un peu abusé:

<script type="text/javascript">

// abstraction des 2 conteneurs "ul" dans un tableau dédié;
var t=[document.getElementById("z1"),document.getElementById("z2")];
var ch;

// pour chaque objet "ul"
for(n in t){
	/*création d'une propriété arbitraire "ind"
	 dont la valeur est l'indice dans le tableau "t" */
	t[n].ind=n;
	ch=t[n].getElementsByTagName("li");
	// pour chaque objet "li"
	for(o in ch){
		// quand on clique dessus		
		ch[o].onclick=function(){
			/* si la propriété "ind" de la liste parente
			a pour valeur "0", on affecte l'élément
			en fin de la liste dont la valeur de "ind" égale "1",
			et vice versa;*/
			t[Math.abs(this.parentNode.ind-1)].appendChild(this)
		}
	}
}

</script>
Javatwister a écrit :
euh oui... question anti-ergonomie du code, j'ai un peu abusé:

<script type="text/javascript">

// abstraction des 2 conteneurs "ul" dans un tableau dédié;
var t=[document.getElementById("z1"),document.getElementById("z2")];
var ch;

// pour chaque objet "ul"
for(n in t){
	/*création d'une propriété arbitraire "ind"
	 dont la valeur est l'indice dans le tableau "t" */
	t[n].ind=n;
	ch=t[n].getElementsByTagName("li");
	// pour chaque objet "li"
	for(o in ch){
		// quand on clique dessus		
		ch[o].onclick=function(){
			/* si la propriété "ind" de la liste parente
			a pour valeur "0", on affecte l'élément
			en fin de la liste dont la valeur de "ind" égale "1",
			et vice versa;*/
			t[Math.abs(this.parentNode.ind-1)].appendChild(this)
		}
	}
}

</script>


En fait, j'avais bien compris le code, mais je ne vois pas pourquoi ça marche Smiley ohwell

C'est le fait de boucler sur les éléments (o in ch) plutôt que de boucler sur la longueur de la liste d'élément (ch.length) peut être... parceque ça revenait au même que ce que je faisait (à peu près, je n'utilisais pas de ind, mais testait directement l'élément parent)

Par contre, je ne vois pas pourquoi l'élément qu'on déplace au click reste dans la première liste... On a bien le append, là okay, mais pourquoi il sort de la première liste ?
a écrit :
pourquoi l'élément qu'on déplace au click reste dans la première liste


que veux-tu dire? l'élément n'est pas déplacé?
Javatwister a écrit :
pourquoi l'élément qu'on déplace au click reste dans la première liste


que veux-tu dire? l'élément n'est pas déplacé?
Oups, j'ai pas écrit ce à quoi je pensais Smiley ohwell

Je voulais dire :

pourquoi l'élément ne reste pas dans la première liste ?
Il est bien déplacé dans la seconde et supprimé de la première, mais je ne vois pas pourquoi il est supprimé de la première justement Smiley ohwell
Smiley eek
... eh bien parce que la méthode objet.appendChild() évalue toujours si son argument est un élément présent dans le dom: si oui, elle le transfère en dernier enfant de "objet";

mais j'enfonce des portes ouvertes;
Javatwister a écrit :
Smiley eek
... eh bien parce que la méthode objet.appendChild() évalue toujours si son argument est un élément présent dans le dom: si oui, elle le transfère en dernier enfant de "objet";

mais j'enfonce des portes ouvertes;


Ahh, okay !
Eh bien, non tu n'enfonces pas des portes ouvertes pour le coup !
Je ne savais pas Smiley smile

C'est impeccable alors !! je me prenais la tête à la supprimer à chaque fois, ce qui était la cause de mes soucis Smiley cligne

Bon, ça roule, merci pour l'aide Smiley smile
Sujet clos
Aller à