Déplacer un élément dans le dom

flo314 · 01/02/2011, 17h56

Bonjour,

imaginons que j'ai les divs suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="conteneur">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

j'aimerai que lorsque l'on clique sur une div 'box' elle passe au premier plan, donc après le dernier élément fils de "conteneur".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function premierplan(obj)
{
	obj.insertAfter(obj.parentNode.lastChild);
}
 
<div id="conteneur">
   <div class="box" onclick="premierplan(this)"></div>
   <div class="box" onclick="premierplan(this)"></div>
   <div class="box" onclick="premierplan(this)"></div>
</div>

Mais cela ne fonctionne pas.
Merci de votre aide.

SpaceFrog · 01/02/2011, 19h38

premier plan ???
je ne saisi pas bien cette notion...

Par contre si il s'agit juste de placer le div à la fin du parent ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function premierplan(obj)
{
	obj.parentNode.appendChild(obj);
}
</script>
</head>
<body>
<div id="conteneur">
   <div class="box" onclick="premierplan(this)">1</div>
   <div class="box" onclick="premierplan(this)">2</div>
   <div class="box" onclick="premierplan(this)">3</div>
</div>
</body>
</html>

mekal · 01/02/2011, 20h21

il y a aussi la solution de cloner la node et de la réinsérer en tant que dernier enfant (lastchild) puis supprimer l’élément d'origine car la norme au niveau de la position des élément fait que le dernier élément inséré se trouve au dessus des autres le tout en faisant abstraction du zIndex

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
.box, .box3, .box2{
position:absolute;
background-color:gray;
height:200px;width:250px;
margin-top:100px;
border:1px ridge #aaa;
-moz-box-shadow: 10px 10px 10px #212121;
-webkit-box-shadow: 10px 10px 10px #212121;
box-shadow: 10px 10px 10px #616161;
}
 
.box2{
left:150px;
}
 
.box3{
left:300px;
}
 
</style>
 
<script type="text/javascript">
function premierplan(obj)
{
var lanodeclone=obj.cloneNode(true);
obj.parentNode.appendChild(lanodeclone)
obj.parentNode.removeChild(obj);
}
</script>
</head>
<body>
<div id="conteneur">
   <div class="box" onclick="premierplan(this)">1</div>
   <div class="box2" onclick="premierplan(this)">2</div>
   <div class="box3" onclick="premierplan(this)">3</div>
</div>
</body>
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email