DRAG and DROP

**gerardp53** · 05/12/2025, 11h21

Bonjour,
Je souhaiterai avoir des explications sur le drag and drop. Lorsque l'on fait glisser un élément de la zone de départ jusqu'à la zone de dépôt, au curseur de la souris est attachée, en filigrane, l'élément glissé.
Toutefois, dans le petit programme que j'ai réalisé sur un Drag and Drop d'un DOMINO, l'élément glissé avec le curseur est toujours l'image du domino d'origine, même lorsque je fait "Pivoter" préalablement le DOMINO, et qu'ensuite je fais glisser ce domino, le filigrane attaché au curseur est toujours le domino d'origine, alors que lorsque je dépose ce élément c'est bien le domino qui a pivoté qui atterrit dans la zone de dépôt.
Je souhaiterai connaître le code qui puisse permettre d'avoir le filigrane du Domino pivoté à 90, 180 ou 270 degrés.
Merci à l'avance,

Ci-joint les trois fichiers de mon petit programme : HTML - CSS - JS
index.html

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
<head>
		<title> DOMINO </title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1> DOMINOS</h1>
<div id="container1">
<div id="domino1" draggable="true" ondragstart="deplace(event)">
	<div class="dominoA">
		<div class="dominoA1">
			<div class="point"><div class="point0"></div></div>
			<div class="point"></div>
			<div class="point"></div>
		</div>
		<div class="dominoA2">
			<div class="point"></div>
			<div class="point"><div class="point0"></div></div>
			<div class="point"></div>
		</div>
		<div class="dominoA3">
			<div class="point"></div>
			<div class="point"></div>
			<div class="point"><div class="point0"></div></div>
		</div>
	</div>
	<div class="dominoB">
		<div class="dominoB1">
			<div class="point"><div class="point0"></div></div>
			<div class="point"></div>
			<div class="point"><div class="point0"></div></div>
		</div>
		<div class="dominoB2">
			<div class="point"></div>
			<div class="point"></div>
			<div class="point"></div>
		</div>
		<div class="dominoB3">
			<div class="point"><div class="point0"></div></div>
			<div class="point"></div>
			<div class="point"><div class="point0"></div></div>
		</div>
	</div>
</div>
</div>
<div id="container2" ondrop="depot(event)" onDragOver="survol(event)">
</div>
<br>
<button id="pivoter">Pivoter</button>
<br>
<script src="javascript.js"></script>
</body>
</html>

javascript.js

Code javascript :

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
const domino1=document.getElementById("domino1");
var contaner2=document.getElementById("container2");
var pivot=0;
let elementGlisse=""; let caseChoisie="";
 
function deplace(event) {	
	elementGlisse = event.target;
	}
function survol(event) {
	event.preventDefault();
	}
function depot(event) {
	container2.appendChild(domino1);
	pivot=0;
	event.preventDefault();
}
 
	pivoter.addEventListener('click', function() {
	if (pivot>360) {pivot=0};
	pivot=pivot+90; 
	if (pivot===90) {domino1.style.transform="rotate(90deg)"; domino1.style.marginTop="20px"; domino1.style.marginLeft="-20px"};
	if (pivot===180) {domino1.style.transform="rotate(180deg)"; domino1.style.marginTop="0px"; domino1.style.marginLeft="0px"};
	if (pivot===270) {domino1.style.transform="rotate(270deg)"; domino1.style.marginTop="20px"; domino1.style.marginLeft="-20px"};
	if (pivot===360) {domino1.style.transform="rotate(360deg)"; domino1.style.marginTop="0px"; domino1.style.marginLeft="0px"; pivot=0;};	
 
	})

style.css

Code css :

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
body
{
	margin-left:50px;
}
#container1
{
	border: 1px solid red;
	width:350px;
	height:150px;
	display:flex;
}
#container2
{
	border: 1px solid red;
	width:350px;
	height:150px;
}
 
#domino1
{
	border: 3px solid black;
	width:80px;
	height:40px;
	display:flex;
	background-color:beige;
}
 
.dominoA
{
	border-right: 1px solid black;
	width:40px;
}
 
.dominoB
{
	width:40px;
}
 
 
Button
{
	float:left;
	height:30px;
	margin-left:200px;
}
.point
{
	width:13px;
	height:13px;
	float:left;	
}
.point0
{
	width:3px;
	height:3px;
	border: 1px solid black;
	border-radius:50%;
	background-color:black;
	margin-top:3px;
	margin-left:3px;	
}

Cordialement. Gérard

**mathieu** · 07/12/2025, 09h53

avec firefox 145 la dernière version, j'ai bien le domino pivoté en filigrane :

quel navigateur utilisez vous ?

**gerardp53** · 08/12/2025, 10h39

Bonjour. Merci d'avoir pris soin de lire mon message. J'utilise "GOOGLE CHROME" comme navigateur.
Gérard.

**gerardp53** · 09/12/2025, 14h40

Bonjour Mathieu,
Effectivement avec le navigateur "FIREFOX", cela fonctionne bien. Avez-vous une solution avec le navigateur "GOOGLE CHROME" ???
A l'avance Merci. Cordialement. Gérard

**domi65** · 09/12/2025, 22h12

Bonjour.
Il te faut remplacer le domino par une copie en utilisant la fonction clone(element, true) une fois celui-ci tourné comme il faut.
Puis remplacer l'élément par sa copie replace

Code JS :

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

domino1.parentNode.replaceChild(domino1, copie);

Et suite à cela, attacher à cette copie un gestionnaire d'événement pour son drag-drop.

Ça t'oblige à revoir la structure du code, mais je crois bien qu'il n'y a pas d'autres solution. On ne peux pas obliger le moteur JS d'un navigateur à intégre les modifications d'un élément pour son "image fantôme" s'il ne le fait pas de lui-même, comme le fait celui de Firefox.
Cordialement.

**Pytet** · 10/12/2025, 13h14

Bonjour,

Une solution serait de réécrire ton propre système drag and drop via des fonctions javascript pour surcharger le comportement du navigateur mais ceci ne semble pas simple.

Une solution plus simple pourrait être l'utilisation d'une bibliothèque telle que jQueryUI, un exemple en ajoutant l'interaction Draggable à partir de ton code : https://jsfiddle.net/rwosuxjb/
Il faut par contre revoir le reste du code avec cette solution pour gérer le drop avec l'interaction Droppable de jQueryIU. Tu peux voir les exemples sur Droppable et Sortable.

Il existe également d'autres projets similaires qui pourrait convenir à la place de jQueryUI, quelques exemples après une recherche rapide :
https://github.com/SortableJS/Sortable
https://github.com/niklasramo/dragdoll
https://interactjs.io/

DRAG and DROP

JavaScript

Vue hybride

Discussions similaires

Partager

Partager