Comme le dis le titre j'aimerais savoir comment déplacer une div avec le curseur, j'ai beau eu faire des recherches je ne trouve rien... et ce n'est pas comme un drag and drop mais plutôt comme powerpoint ou google slide c'est à dire que je récupère la div et la déplace avec le curseur à la position souhaitée puis je la laisse et elle reste la où elle est...
Auriez-vous une idée de comment faire ?
J'ai d'ailleurs pensé à récuperer les coordonnées de la souris et quand je clique sur ma div je la tp automatiquement à la pos de mon curseur mais je ne sais pas si c'est une idée débile ou pas...
Merci d'avance,
Maxence ABRILE
- Edité par Maxence ABRILE 1 septembre 2021 à 23:28:16
Ce n'est pas une idée débile du tout. Effectivement je procéderais à peu près de cette manière.
1ère étape, placer un eventListener sur ta div à déplacer. Quand tu cliques sur la div, sa position devient absolue ( voir cours sur le positionnement en css ) et les coordonnées seront alors celle du curseur.
2éme étape, créer une fonction qui récupère en temps réél les mouvements de la souris, et les répercute sur les coordonnées de la div.
3ème étape, ajouter un eventListener pour stopper le déplacement de la div.
La démarche globale serait la suivante, le premier eventListener déclenche sa propre suppression ( pour ne pas démarrer une deuxième fois le processus ), définit le positionnement absolu, déclenche la fonction de déplacement, et ajoute le deuxième eventListener ( celui qui stoppe le déplacement ). Le deuxième eventListener déclenche sa propre suppression, stoppe la fonction de déplacement, et remet en place le premier eventListener.
Je n'ai jamais travaillé sur ce genre d'action, ni sur les déplacement de curseur souris, donc je ne pourrais pas t'aider plus en détail, mais je suis à peu près certain que c'est possible.
D'accord merci beaucoup mais il y a deux problèmes dans cette technique...
Le premier : j'ai bien plus d'une div car je les crées avec du js... Automatiquement, je ne peux donc pas les ciblée avec un event listenener.
Le deuxième : si je met ma div à la position du curseur c'est effectivement plus facile, mais la div se, en quelque sorte, téléportera sur mon curseur (car sa position ne sera pas la même que quand le curseur cliquera dessus)...
Pour ça j'ai deux solutions :
- Soit je récupère la première postion de la div et la première du curseur et je calcule la nouvelle pos du curseur - l'ancienne afin d'avoir le déplacement que j'ajoute aux coordonnées de ma div,
- soit je récupère la différence entre la position du curseur et de celle de la div et je mets la position de la div à la pos du curseur - la différence (ou plus la distance).
Mais bien sûr que si, tu peux ajouter un eventListener lors de la création d'une div par JS. Et ce autant de fois que tu veux. J'ai par exemple fait un code JS qui créé jusqu'à 64 cases d'un plateau de jeu et qui pour chacune d'elle ajoute un eventListener.
Pour le deuxième problème, ta solution me paraît pas mal du tout.
Merci SachaCherki c'est exactement ça... En plus je connaissais le site internet en question que suis-je bête... j'utilise quasiment jamais du jQuery mais je pense j'y mettre comme au js. Merci beaucoup aux autres commentaitres, et pour ce qui est du clientX il ne marche pas en setInterval de mon côté... Donc je pense partir sur le Jquery.
Merci beaucoup j'ai enfin réussis à le faire fonctionner c'est du toner
Merci encore,
Maxence ABRILE
- Edité par Maxence ABRILE 21 septembre 2021 à 12:14:52
Déplacer une div grâce au curseur
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
yasakani no magatama