DRAG and DROP

[gerardp76]

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,
J'ai essayé de vous envoyer mes fichiers, mais ça ne fonctionne pas.
Cordialement. Gérard
---------------------
Ci-dessous le code Javascript de mon programme :
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;};

})

[webmaster]

Bonjour

Sujet technique et intéressant
Je suppose que les transformations ne sont pas prises en compte par le navigateur pour gérer le filigrane.

La solution que je vois est de construire les images physiquement avec du JS pour ne pas utiliser les transform
Mais ca parait complexe pour un détail d'affichage

[gerardp76]

Bonjour,
Merci d'avoir répondu. En effet j'ignore si l'on peut modifier le filigrane.
Une solution serait d'attacher, lors des pivotements de 90 et 270 degrés, une image d'un domino vertical, avec le code : event.dataTransfer.setDragImage(img,0,0). Ca fonctionne, mais le problème est qu'il ne représente pas le domino avec les chiffres.
Cordialement. Gérard

[gerardp76]

Ce qui est curieux quand même, c'est que le transfert du domino s'effectue correctement, quel que soit le pivotement effectué.
Gérard

[essamattougui]

C'est vraiment trop étrange melon sandbox.