Partage
  • Partager sur Facebook
  • Partager sur Twitter

Déplacer une div grâce au curseur

Sujet résolu
    1 septembre 2021 à 23:16:38

    Bonjoir,

    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

    • Partager sur Facebook
    • Partager sur Twitter
      2 septembre 2021 à 8:26:59

      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.

      • Partager sur Facebook
      • Partager sur Twitter
        2 septembre 2021 à 9:27:10

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

        • Partager sur Facebook
        • Partager sur Twitter
          2 septembre 2021 à 11:59:38

          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.

          Maintenant, reste à mettre en pratique ;)

          • Partager sur Facebook
          • Partager sur Twitter
            3 septembre 2021 à 9:51:44

            Bonjour,

            Pour ton deuxième problème, tu peux calculer le chemin qu'à fais ta souris et faire une translation au lieu de changer la position de la div.

            Une lib qui est pas mal pour faire des animations js (je pense à draggable pour ton cas) :

            https://greensock.com/gsap/ 

            -
            Edité par piero5673 3 septembre 2021 à 9:53:19

            • Partager sur Facebook
            • Partager sur Twitter
              3 septembre 2021 à 12:31:32

              Hello, tu devrais jeter un oeil la dessus, je pense que c'est le comportement que tu attends : 

              https://jqueryui.com/draggable/

              -
              Edité par SachaCherki 3 septembre 2021 à 12:31:58

              • Partager sur Facebook
              • Partager sur Twitter
                3 septembre 2021 à 12:32:56

                pour avoir la position du curseur sur l'axe x et y tu as clientX et clientX je crois que ca vient de window faudra verifier.

                window. clientX

                • Partager sur Facebook
                • Partager sur Twitter
                  3 septembre 2021 à 15:03:14

                  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.
                  • Partager sur Facebook
                  • Partager sur Twitter
                    3 septembre 2021 à 16:24:29

                    Pour être sur que tu comprennes bien le principe, petit exemple :

                    https://jsfiddle.net/7agxed2w/ 

                    Les deux évènement rattaché à window peuvent être ajoutés au mousedown et enlevés au mouseup.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      21 septembre 2021 à 12:14:40

                      En effet,

                      Merci beaucoup j'ai enfin réussis à le faire fonctionner c'est du toner :p

                      Merci encore,

                      Maxence ABRILE

                      -
                      Edité par Maxence ABRILE 21 septembre 2021 à 12:14:52

                      • Partager sur Facebook
                      • Partager sur Twitter

                      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é.
                      • Editeur
                      • Markdown