DRAG and DROP

3 pièce(s) jointe(s)

DRAG and DROP

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
Pièce jointe 672348

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
<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>

Pièce jointe 672349

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
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;};	
 
	})

Pièce jointe 672350

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
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

avec firefox 145 la dernière version, j'ai bien le domino pivoté en filigrane :
https://lutim.stolon.fr/Qe440OdMEuP3mcoK.png

quel navigateur utilisez vous ?

Drag and Drop

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

Drag and drop

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

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:

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.

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/