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

Version imprimable

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:

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.

Salut,

En modifiant la fonction drop par exemple comme ceci :

Code:

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

15/05/2019, 19h02
aristim

Merci

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.:applo:
15/05/2019, 20h32
Beginner.

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

Quelques remarques !

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:

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:

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:

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:

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.