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