[DOM] déplacer un élément

Version imprimable

Bonsoir,

j' aimerai déplacer (cad faire passer un élément par exmple d div2 à div1) un élèment de sa position à une autre . juste en cliquant (sélectionnant l 'élément) sur l 'élément que l 'on souhaite déplacé puis ensuite sur une image
En fait , j' ai ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <img src="images/fleche_up.gif" alt="fléche" /><img src="images/fleche_down.gif" alt="fléche" /> <div id="div1"> contenu div1 </div> <div id="div2"> contenu div2 </div> <div id="div3"> contenu div3 </div> <div id="div4"> contenu div4 </div>
comment pourrai je faire ça?
une suggestion.
merci d' avance.

07/04/2009, 23h21
le_chomeur

tu souhaites modifier l'ordre des éléments ou faire du déplacement ?
08/04/2009, 11h11
emmanuel.remy

Salut,

Utilise le DOM pour cela: regarde les méthodes appendChild et removeChild.
Sur le clic tu peux enregistrer la référence à l'élément sélectionné, et sur le clic du bouton tu fait ton déplacement à l'aide des fonctions du DOM.

ERE
08/04/2009, 11h19
le_chomeur

emmanuel.remy s'il s'agit de faire du déplacement d'ordre, un simple insertBefore suffit , pas besoins de recréer l'objet ... :-)
08/04/2009, 11h26
legide

Bonjour,
je souhaite modifier l' ordre des éléments.
je me penche sur les fonctions dom.

merci

voila :

Code:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.selected{
				border:1px solid red;
			}
			.unselected{
				border:none;
			}
		</style>
		<script type="text/javascript">
			var current = null;
 
			//*************************** nétoie les noeuds vide !!
			var notWhitespace = /\S/;
 
			var TEXT_NODE;
			try {
			   TEXT_NODE = Node.TEXT_NODE;
			} catch(e) {
			   TEXT_NODE = 3;
			}
 
			var ELEMENT_NODE;
			try {
			  ELEMENT_NODE = Node.ELEMENT_NODE;
			} catch(e) {
			   ELEMENT_NODE = 1;
			} 
			function cleanWhitespace(node) {
			  for (var x = 0; x < node.childNodes.length; x++) {
			    var childNode = node.childNodes[x];
			    if ((childNode.nodeType == TEXT_NODE)&&(!notWhitespace.test(childNode.nodeValue))) {
			      node.removeChild(node.childNodes[x]);
			      x--;
			    }
			    if (childNode.nodeType == ELEMENT_NODE) {
			      cleanWhitespace(childNode);
			    }
			  }
			} 
			//*********************** fin de la méthode de nétoyage
 
 
			function selectElement(element){
				for(var i = 0 , l = element.parentNode.getElementsByTagName('div').length; i < l;i++){
					element.parentNode.getElementsByTagName('div')[i].className = 'unselected';
				}
				element.className = 'selected';
				current = element ;
			}
 
			function monter(){
				var parent = current.parentNode;
				var precedant = current.previousSibling;
				parent.insertBefore(current, precedant);
			}
			function descendre(){
				var parent = current.parentNode;
				var suivant = current.nextSibling;
				parent.insertBefore(current, suivant.nextSibling);
			}
		</script>
	</head>
	<body>
		click sur un élément pour le selectionner puis click sur un des boutons :) <br />
 
<input type="button" value="monter" onclick="monter()" >
<input type="button" value="suivant" onclick="descendre()" >
<div id="conteneur">
	<div id="div1" onclick="selectElement(this)">
	   contenu div1
	</div>
	<div id="div2" onclick="selectElement(this)">
	   contenu div2
	</div>
	<div id="div3" onclick="selectElement(this)">
	    contenu div3
	</div>
	<div id="div4" onclick="selectElement(this)">
	   contenu div4
	</div>
</div>
<script type="text/javascript">
	cleanWhitespace(document.getElementById('conteneur'));
</script>		
	</body>
</html>

08/04/2009, 13h28
legide

Bonjour,
merci beaucoup pour ce code ,
ça marche.

bjr,
ça marche mais il y a un souci.

pourquoi lors la sélection de l' élément les classes passent à unselected? ne pouvons nous pas ne pas changer les classes parce que ça détruis mon style?
dans mon cas , j' ai un container

Code:

1
2
 
class="test1"

dans lequel il y a :

Code:

1
2
 
menu_objets_item son premier fils et menu_objets_item_sm son deuxième fils

Code:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<div id="container_parent">
      <div class="test1" onclick="selectElement(this)"><!-- container -->
		    <div class="menu_objets_item">
		    	        <div id="img1" class="menu_objets_item_g"></div>
		    	         <div class="menu_objets_item_d">EDITO</div>
		    </div>
		    <div class="menu_objets_item_sm">
		    	     <div class="menu_objets_item_sm_item">
		    	          <div class="menu_objets_item_sm_item_g"></div>
		    	          <div class="menu_objets_item_sm_item_d">
		    	          	   	               EDITO
		    	          </div>
		    	          <div class="annule_float"></div>
		    	    </div>
		    	     <div class="menu_objets_item_sm_item">
		    	          <div class="menu_objets_item_sm_item_g"></div>
		    	          	   <div class="menu_objets_item_sm_item_d">
		    	          	   	               EDITO
		    	          	   </div>
		    	          	   <div class="annule_float"></div>
		    	          </div>
		    	           <div class="menu_objets_item_sm_item">
		    	          	  <div class="menu_objets_item_sm_item_g">  </div>
		    	          	   <div class="menu_objets_item_sm_item_d">
		    	          	   	               EDITO
		    	          	   </div>
		    	          	   <div class="annule_float"></div>
		    	          </div>
 
		    	          </div>
		    	  </div><!-- container -->
	<div class="test2" onclick="selectElement(this)"><!-- container -->
		    	          	   <div class="menu_objets_item">
		    	          	   	     <div id="img2" class="menu_objets_item_g"></div>
		    	          	   	     <div class="menu_objets_item_d">Interview</div>
		    	          	   </div>
		    	          	   <div class="menu_objets_item_sm">
		    	          	   	     <div class="menu_objets_item_sm_item">
		    	          	   	     	     <div class="menu_objets_item_sm_item_g"></div>
		    	          	   	           <div class="menu_objets_item_sm_item_d">
		    	          	   	               Interview1
		    	          	   	           </div>
		    	          	   	           <div class="annule_float"></div>
		    	          	         </div>
		    	          	         <div class="menu_objets_item_sm_item">
		    	          	   	     	     <div class="menu_objets_item_sm_item_g"></div>
		    	          	   	           <div class="menu_objets_item_sm_item_d">
		    	          	   	               Interview1
		    	          	   	           </div>
		    	          	   	           <div class="annule_float"></div>
		    	          	         </div>
		    	          	         <div class="menu_objets_item_sm_item">
		    	          	   	     	     <div class="menu_objets_item_sm_item_g"></div>
		    	          	   	           <div class="menu_objets_item_sm_item_d">
		    	          	   	               Interview1
		    	          	   	           </div>
		    	          	   	           <div class="annule_float"></div>
		    	          	         </div>
 
		    	          	   </div>
		    	          	</div><!-- container -->

je pense que si on peux annuler les changement de classes à la sélection ça n' affecterai pas mon style.
j' ai essayé de modifier ton code en supprimant quelques lignes de la fonction

Code:

1
2
3
4
5
6
 
function selectElement(element){
 
 
				current = element ;
			}

mais ça ne change rien.
merci d' avance.

Code:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.selected{
				border:1px solid red;
			}
			.unselected{
				border:none;
			}
		</style>
		<script type="text/javascript">
			var current = null;
 
			//*************************** nétoie les noeuds vide !!
			var notWhitespace = /\S/;
 
			var TEXT_NODE;
			try {
			   TEXT_NODE = Node.TEXT_NODE;
			} catch(e) {
			   TEXT_NODE = 3;
			}
 
			var ELEMENT_NODE;
			try {
			  ELEMENT_NODE = Node.ELEMENT_NODE;
			} catch(e) {
			   ELEMENT_NODE = 1;
			} 
			function cleanWhitespace(node) {
			  for (var x = 0; x < node.childNodes.length; x++) {
			    var childNode = node.childNodes[x];
			    if ((childNode.nodeType == TEXT_NODE)&&(!notWhitespace.test(childNode.nodeValue))) {
			      node.removeChild(node.childNodes[x]);
			      x--;
			    }
			    if (childNode.nodeType == ELEMENT_NODE) {
			      cleanWhitespace(childNode);
			    }
			  }
			} 
			//*********************** fin de la méthode de nétoyage
 
 
			function selectElement(element){
 
				current = element ;
			}
 
			function monter(){
				var parent = current.parentNode;
				var precedant = current.previousSibling;
				parent.insertBefore(current, precedant);
			}
			function descendre(){
				var parent = current.parentNode;
				var suivant = current.nextSibling;
				parent.insertBefore(current, suivant.nextSibling);
			}
		</script>
	</head>
	<body>
		click sur un élément pour le selectionner puis click sur un des boutons :) <br />
 
<input type="button" value="monter" onclick="monter()" >
<input type="button" value="suivant" onclick="descendre()" >
<div id="conteneur">
	<div id="div1" onclick="selectElement(this)">
	   contenu div1
	</div>
	<div id="div2" onclick="selectElement(this)">
	   contenu div2
	</div>
	<div id="div3" onclick="selectElement(this)">
	    contenu div3
	</div>
	<div id="div4" onclick="selectElement(this)">
	   contenu div4
	</div>
</div>
<script type="text/javascript">
	cleanWhitespace(document.getElementById('conteneur'));
</script>		
	</body>
</html>