Inverser plusieurs DIV

Version imprimable

09/04/2016, 10h10
Papymouzo

Inverser plusieurs DIV

Bonjour,
Si je me débrouille en PHP, je suis nul en Javascript, bien que j'utilise des bouts de code trouvés sur Internet.
En fait je cherche une fonction qui me permettrait d'inverser deux div à deux endroits en un clic ... je m'explique:

<DIV1> <une image> <Un texte hyperlien pour inverser cette div avec la div2> <une image> </DIV1> // affichée par défaut au chargement de la page
<DIV2> <une autre image> <Un texte hyperlien pour inverser cette div avec la div1> <une autre image> </DIV2> // cachée par défaut au chargement de la page

à un autre endroit de la page
<DIV3> <un contenu iframe> </DIV3> // affichée par défaut au chargement de la page
<DIV4> <un autre contenu iframe > </DIV4> // cachée par défaut au chargement de la page

Les clics hyperliens dans les DIV1 et DIV2 doivent inverser DIV1 <-> DIV2 mais également DIV3 <-> DIV4
------------------------
<DIV5> <une image> <Un texte hyperlien pour inverser cette div avec la div6> <une image> </DIV5> // affichée par défaut au chargement de la page
<DIV6> <une autre image> <Un texte hyperlien pour inverser cette div avec la div5> <une autre image> </DIV6> // cachée par défaut au chargement de la page

<DIV7 <un contenu iframe> </DIV7> // affichée par défaut au chargement de la page
<DIV8> <un autre contenu iframe > </DIV8> // cachée par défaut au chargement de la page

Les clics hyperliens dans les DIV5 et DIV6 doivent inverser DIV5 <-> DIV6 mais également DIV7 <-> DIV8 !!! Pas d'interaction avec les DIV 1 à 4

Merci d'avance pour votre aide ...
10/04/2016, 03h32
Beginner.

Salut,

Teste ça : http://jsbin.com/qexekoqibe/1/edit?html,js,output
10/04/2016, 08h02
Papymouzo

Merci Beginner,

:D Génial, c'est exactement ce que je voulais faire ... et en plus tu me facilite le boulot en écrivant tout le script.

Mille mercis
10/04/2016, 09h07
Papymouzo

J'avais mis le topic en résolu car la réponse fournie par Beginner est absolument géniale et correspond exactement à ce que je voulais faire (Encore merci, Beginner) ...
Mais je le ré-ouvre car j'ai encore une question ... a tout hasard et sans urgence :
Peut-on passer l'état des div (block ou none) à une ou des variables globales (comme en PHP) ?
Ceci afin de conserver l'état de chaque div au rechargement de la page ou à l'accès à une page suivante (avec le même code script et html).
Je m'explique : Le script sert en fait à montrer (par défaut) ou cacher deux infos déroulantes dans la page (dans les iframe). Ces infos sont reprises sur chaque page du site.
L'idéal serait que le visiteur qui ne veut pas les voir (l'une ou l'autre ou les deux) ne doive pas recliquer sur le lien permutte() au changement de page et que son choix soit mémorisé pour toute sa visite.
Je n'ai pas de problème à passer des variables en PHP mais en JS, c'est une autre histoire
... mais c'est juste un petit plus pour le confort de la navigation et sans urgence bien sûr.

Merci
Philippe
11/04/2016, 18h52
Papymouzo

J'ai trouvé ... utilisation de cookies !
Encore merci Beginner :D

Trois autres solutions plus génériques

Bonsoir,

Outre les techniques de masquage qui peuvent être obtenues aussi par CSS en utilisant l'attribut : target, plusieurs autres solutions peuvent être utilisées pour déplacer des éléments.

1- Une première solution consiste à permuter le contenu (innerHTML) de containers.
Définir à la conception des containers :
Code:

1 2 3 4 5 6 <div id="container-1"> <div id="mydiv-1"> ... </div> </div> <div id="container-2"> <div id="mydiv-2"> ... </div> </div> <div id="container-3"> <div id="mydiv-3"> ... </div> </div> <div id="container-4"> <div id="mydiv-4"> ... </div> </div> ... <div id="container-n> <div id="mydiv-n> ... </div> </div>
Pour changer l'ordre d'affichage nous écrirons dans un ordre adapté (simple tri et index de permutation), les permutations utiles et optimisées en utilisant dans la pratique des array définissant les permutations utiles.
A titre d'exemple nous permuterons 1 et 2 :
Code:

1 2 3 4 var Hcontent1 = document.getElementById("container-1").innerHTML; var Hcontent2 = document.getElementById("container-2").innerHTML; document.getElementById("container-1").innerHTML=Hcontent2; document.getElementById("container-2").innerHTML=Hcontent1;
ou bien
Code:

1 2 3 var Hcontent_temp = document.getElementById("container-1").innerHTML; document.getElementById("container-1").innerHTML=document.getElementById("container-2").innerHTML; document.getElementById("container-2").innerHTML=Hcontent_temp;
des précautions s'imposent voir https://developer.mozilla.org/fr/doc...ent/innertHTML

2- On peut aussi utiliser les fonctions du DOM pour réassigner les éléments enfants (les div "mydiv-n") aux containers adaptés et générer ainsi une nouvelle organisation de la hiérarchie.
Plus complexe et délicat elle utilisera en fait directement les pointeurs vers les éléments et il sera toujours nécessaire d'utiliser au moins un container caché servant de réservoir tampon pour ne pas perdre des éléments en route.

3- Enfin le clonage peut être encore plus efficace, dans ce cas on cache tous les éléments d'origine et l'on manipule les clones que l'on ajoute comme enfants dans un container rendu visible à la demande.

Cordialement

Trebly

12/04/2016, 11h30
Papymouzo

Merci Trebly,

Je vais étudier tes infos et faire quelques tests ...

Cordialement

Bonjour,

Citation:

Une première solution consiste à permuter le contenu (innerHTML) de containers.

c'est assurément la méthode qu'il faut éviter dans ce cas car il est préférable de manipuler le conteneur que son contenu.

Citation:

Enfin le clonage peut être encore plus efficace

pas forcément judicieux dans le cas de déplacement, je dirais que cette méthode est plus opportune dans la duplication d'éléments comme dans un formulaire par exemple ou encore lorsque l'on veut réaliser un effet en voulant donner une impression de, effet miroir ...

Citation:

On peut aussi utiliser les fonctions du DOM pour réassigner les éléments enfants (les div "mydiv-n") aux containers

c'est assurément la méthode la mieux adaptée, elle n'est pas plus complexe que tout autres méthodes.
La solution la plus simple est d'utiliser conjointement les méthodes removeChild et appendChild.

Code:

1
2
oElem.parentNode.removeChild( oElem); // supprimé du parent
oDest.appendChild( oElem);            // ajouté dans un autre conteneur

La méthode removeChild retire un élément du DOM, mais celui-ci existe toujours en mémoire et peut donc être réutiliser, de plus cette méthode retourne la référence à l'objet retiré ce qui permet d'en garder l'usage.

Une autre approche, suivant le besoin, est de transférer l'élément dans un documentFragment, qui peut s'apparenter à un document de stockage mais hors DOM.

• pour le stockage :

Code:

1
2
3
4
5
var oDocFragment = document.createDocumentFragment();
var oElem = document.querySelector('#move');
if( oElem){
    oDocFragment.appendChild( oElem);
}

• pour la récupération :

Code:

1
2
3
4
5
var oElem = oDocFragment.querySelector('#move');
if( oElem){
  var oDest = document.querySelector('#id_destination');
  oDest.appendChild( oElem);
}

Un fichier de test pour voir les méthodes en action

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Déplacement élément</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  font:1em/1.5em Verdana;
}
#gauche,
#droite {
  width:50%;
  float:left;
  height:30em;
  background:#cde;
}
#droite {
  background:#ecd;
}
#move {
  margin:1em;
  border:1px solid #ccc;
  cursor:pointer;
  background:#fff;
}
#gauche #move {
  color:#0A6DD0;
}
#droite #move {
  color:#D00A6D;
}
button {
  font:.9em/2em Verdana;
  cursor:pointer;  
}
</style>
</head>
 
<body>
<h1>Déplacement élément</h1>
<p>
  <button id="btn_kill">Supprimer la liste</button>
  <button id="btn_add_gauche">Restaurer à gauche</button>
  <button id="btn_add_droite">Restaurer à droite</button>
</p>  
<p>
  La <code>méthode removeChild</code> retire un élément du DOM, mais celui-ci existe toujours en mémoire et peut donc être réutiliser.
  Il suffit de garder une référence à cet élément ou passer par un <code>fragmentDocument</code> pour pouvoir le récupérer via un <code>querySelector('#id')</code>.
</p>  
<p>
  <button id="btn_fragment_copy">Copy in Fragment</button>  
  <button id="btn_fragment_restore">Restore since Fragment</button>    
</p>
<p>
  Cliquer sur la liste pour la faire changer de parent.
</p>
<div id="gauche" class="w_50"><code>&lt;DIV id="gauche"></code>
  <div id="move">
    <ul>
      <li>Mensarum enim voragines et varias voluptatum</li>
      <li>Haec subinde Constantius audiens et quaedam</li>
      <li>Hanc regionem praestitutis celebritati diebus</li>
      <li>Et quia Montius inter dilancinantium manus</li>
      <li>Verum ad istam omnem orationem brevis est</li>
    </ul>
  </div>
</div>
<div id ="droite" class="w_50">
  <code>&lt;DIV id="droite"></code>
</div>
<script>
var oMove = document.getElementById('move');
oMove.onclick = function (){
  var oDest = null;
  if( this.parentNode.id ==='gauche'){
    oDest = document.getElementById('droite');
  }
  if( this.parentNode.id ==='droite'){
    oDest = document.getElementById('gauche');
  }
  if (oDest){
    this.parentNode.removeChild( this);
    oDest.appendChild( this);
  }
};
// bouton supprimer
document.getElementById('btn_kill').onclick = function(){
  oMove.parentNode.removeChild( oMove);
};
// bouton ajout à gauche
document.getElementById('btn_add_gauche').onclick = function(){
  if( !oMove.parentNode){
    var oDest = document.getElementById('gauche');
    oDest.appendChild( oMove);
  }
};
// bouton ajout à droite
document.getElementById('btn_add_droite').onclick = function(){
  var oElem = oMove;
  if( oElem && !oElem.parentNode){
    var oDest = document.getElementById('droite');
    oDest.appendChild( oElem);
  }
};
// utilisation de documentFragment
var oDocFragment = document.createDocumentFragment();
document.getElementById('btn_fragment_copy').onclick = function(){
  var oElem = document.getElementById('move');
  if( oElem){
    oDocFragment.appendChild( oElem);
  }
};
document.getElementById('btn_fragment_restore').onclick = function(){
  var oElem = oDocFragment.querySelector('#move');
  if( oElem){
    var oDest = document.getElementById('gauche');
    oDest.appendChild( oElem);
  }
};
</script>
</body>
</html>