Changer design objet déplacé

Bonjour,

J'ai une question toute bête mais ne sachant pas comment ça s'appelle je ne trouve pas la solution…

J'ai un système de drag & drop qui fonctionne mais j'aimerais appliquer certains attributs CSS à ma div qui est en déplacement. Comment faire ?

Merci d'avance

Salut,

Tu utilise quoi pour gérer ton drag-n-drop ?

J'ai suivis ce tutoriel.

Je pense qu'on peut appeler ça l'API native à HTML 5. Je voudrais faire comme sur Trello en résumé

Tu as fonction js appelée quand tu drag. Dans cette fonction, change le style de ton élément.

J'ai essayer mais ça s'applique aux deux éléments. En effet ce que j'ai l'impression de déplacer est en fait une image de ma div générer par le navigateur. Donc quand par exemple je fais :

1
2
3
4
5

prods[i].addEventListener('dragstart', function(evnt) {
                 $('#' + this.id).css('background-color', 'red');
                 ...
                 return false;
              }, false);

ça me donne

Vu les screenshots je suis pas sur d'avoir envie de t'aider.

C'est ton droit… Mais je trouve ça petit :

Je suis entrain d'essayer de développé un site web pour aller de paire avec une application mobile interdit au enfants. C'est pourquoi j'ai pensé que pour préserver la jeunesse de ce forum je devais censurer les termes pouvant choquer. Après je ne voie pas en quoi le thème d'un site (du moment qu'il reste légal) devrais influencer l'aide technique qu'on peut recevoir pour le dév' de celui-ci.

Sinon pour revenir au problème j'ai bien trouvé une solution : générer une image avec htlm2canvas et utiliser la fonction (sur l’événement start) :

1

dataTransfer.setDragImage(dragImg, 40, 40);

Mais bon… Pas totalement convaincu vu comment ça alourdi le code…

Heureux de voir que certain ont encore envie de m'aider

Je l’essayerai également quand j'aurais un peu de temps. Sinon j'ai aussi trouvé une piste pour une méthode encore plus propre (selon moi) :

1
2
3
4
5

var crt = this.cloneNode(true);
crt.style.backgroundColor = "white";
crt.style.position = "absolute"; crt.style.top = "-500px"; crt.style.right = "0px";
$("#liste-cfait").append(crt);
evnt.dataTransfer.setDragImage(crt, 0, 0);

Je vais essayer de vous tenir au courant.

PS : Ton pseudo me dérange à un point que je l'admire.