Drag and drop avec échange d'éléments

**aristim** · 14/05/2019, 20h28

Bonjour,

Je cherche une procédure pour échanger deux paragraphes (<p>) à l'intérieur de contenants <div>.
Par exemple: lorsque je déplace P1(associée à une image) dans le div où est P2( associé à une image), je voudrais que P2 aille automatiquement dans le div où était P1.

J'ai une page qui déplace ces paragraphes mais je ne sais pas comment faire un échange (un remplacement). Je vous la joins:

Code HTML :

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
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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Echange</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/JavaScript" src="../../../JVS/Tutos/BoutonsDemo.js"></script> 
		<style type="text/css">
                        #site{padding:20px;width:600px;margin:auto;}
                        .dropZones {
                                float: left; 
                                width: 100px; 
                                height: 100px;
                                margin: 15px;
                                padding: 10px;
                                border: 1px solid #aaaaaa;
                        }
                </style>
 
		<!-- FONCTIONS JAVA-->
		<script type="text/JavaScript">
                <!-- 
                        function dragStart(event) {
                                event.dataTransfer.effectAllowed = "copy";
                                event.dataTransfer.setData("type", event.target.tagName);
                                event.dataTransfer.setData("id", event.target.id);
                                document.getElementById("demo").innerHTML = "Début de glissement pour l'élément  "+event.target.tagName;
                        }
 
                        function dragEnd(event) {
                                event.dataTransfer.dropEffect = "copyMove";
                                event.dataTransfer.effectAllowed = "copy";
                        }
 
                        function dropZone(event) {
                                event.preventDefault();
                        }
 
                        function drop(event) {
                                event.preventDefault();
                                var data = event.dataTransfer.getData("id");
                                event.target.appendChild(document.getElementById(data));
                                document.getElementById("demo").innerHTML = "Dépot de l'élément "+event.dataTransfer.getData("type");
                                
                        }
                //--> 
                </script>
 
	</head>
 
 
	<body>
		<div id="site">
			<table>
				<tr>
					<td >
						<div class="dropZones" ondrop="drop(event)" ondragover="dropZone(event)">
							<p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="P_1">
								P1
								<img src="image.png" draggable="false">
							</p>
						</div>
					</td>
					<td>
						<div class="dropZones" ondrop="drop(event)" ondragover="dropZone(event)">
							<p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="P_2">
								P2
								<img src="image2.png" draggable="false">
							</p>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan ="2" style="text-align:center" id="demo"></td>
				</tr>
			</table>
		</div>
	</body>
</html>

Merci d'avance pour vos idées.

**Beginner.** · 15/05/2019, 18h20

Salut,

En modifiant la fonction drop par exemple comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function drop(event) {
				event.preventDefault();
                var data = event.dataTransfer.getData("id");
                var elm = document.getElementById(data) ;
                var divOrigine = elm.parentElement;
                var divDestination = event.target ; 
                divOrigine.appendChild(divDestination.firstElementChild);
				divDestination.appendChild(elm);
				document.getElementById("demo").innerHTML = "Dépot de l'élément "+event.dataTransfer.getData("type");
 
			}

Tu peux tester ici : https://jsbin.com/woyililegu/edit?html,output

**aristim** · 15/05/2019, 19h02

Ca marche au poil.
juste un problème quand on drop à l'intérieur du <p>, ça scinde le texte de son image. Mais je vois comment résoudre ce problème.
Merci pour la célérité de la réponse.

**Beginner.** · 15/05/2019, 20h32

Oui c'est possible je n'ai pas remarqué car j'ai testé sans images en fait...

**NoSmoking** · 16/05/2019, 19h04

Bonjour,
tu gagnerais à utiliser la méthode addEventListener pour « accrocher » un événement à tes éléments draggable="true" et cela pour au moins deux raisons.

Séparation des couches, pas de JavaScript dans le HTML ;
Obtention du bon élément « dragger » dans les fonctions via le mot clé this, contrairement à event.target qui peut t'obliger à faire une gymnastique.

Le code HTML devient limpide et évolutif sans soucis, ton exemple donnerait

Code html :

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
<table>
  <tr>
    <td>
      <div class="dropZones">
        <p draggable="true" id="P_1">P1
          <img src="image.png">
        </p>
      </div>
    </td>
    <td>
      <div class="dropZones">
        <p draggable="true" id="P_2">P2
          <img src="image2.png">
        </p>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2" style="text-align:center" id="demo"></td>
  </tr>
</table>

au passage, l'utilisation d'une <table> dans ton cas ne se justifie pas mais bon ...

L'affectation des événement est elle aussi des plus simple

Code :

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

1
2
3
4
5
6
7
8
9
10
const elemsDrop = document.querySelectorAll(".dropZones");
elemsDrop.forEach( function(elem){
  elem.addEventListener( "drop", drop);
  elem.addEventListener( "dragover", dropZone);
});
const elemsDrag = document.querySelectorAll("[draggable=true]");
elemsDrag.forEach( function(elem){
  elem.addEventListener( "dragstart", dragStart);
  elem.addEventListener( "dragend", dragEnd);
});

tu n'auras rien à modifier si tu fais évoluer ton code HTML.

L'avantage est que maintenant tu récupères via le this directement l'élément souhaité, par exemple

Code :

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

1
2
3
4
5
6
7
function dragStart(event) {
  const elemDrag = this;
  event.dataTransfer.effectAllowed = "copy";
  event.dataTransfer.setData("type", elemDrag.tagName);     // attention compatibilté IE11 si besoin
  event.dataTransfer.setData("id", elemDrag.id);
  document.getElementById("demo").innerHTML = "Début de glissement pour l'élément  " + event.target.tagName;
}

tu pourras noter que event.target pourra être différent suivant l'endroit où tu auras cliqué mais que le this (elemDrag) sera toujours le même ce qui simplifie la fonction sur le « drop ».

Exemple :

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
function drop(event) {
  event.preventDefault();
  // récup. des différents éléments
  const id = event.dataTransfer.getData("id");
  const elemDrop = document.getElementById(id);
  const oSource = elemDrop.parentNode;
  const oDestination = this;
  // ATTENTION : on ne fait rien si l'on repose l'élément au même endroit
  if (oDestination !== oSource) {
    // get all Elements et les déplaces
    while (oDestination.firstChild) {
      oSource.appendChild(oDestination.firstChild);
    }
    // déplace l'élément droppé
    oDestination.appendChild(elemDrop);
  }
  document.getElementById("demo").innerHTML = "Dépot de l'élément ";
}

J'ai ajouté quelques corrections mais d'autres méthodes pourraient également convenir, je pense notamment à replaceChild.

Drag and drop avec échange d'éléments

JavaScript

Discussions similaires

Partager

Partager