Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] Evements liés à la souris

    7 juin 2006 à 17:34:48

    Bonjour,

    Je cherche à obtenir les coordonées de la souris dans la fenêtre du navigateur en temps réel via javascript TANT QUE le bouton gauche est appuyé. J'ai essayé pleins de choses sans résultats.

    Comment faire sachant que je souhaite que le script fonctionne sous Firefox et sous IE au minimum ?


    Cette compatibilité que je souhaite a mis en défaut tous mes essais. :-°

    Le code pour le clic gauche :


    // Temps que le bouton gauche de la souris est appuyé
      while( (!document.all && e.which == 1) || (document.all && event.button==1) )
        {
          // On déplace notre bloc en fonction de la position de la souris

            // On commence par intercepter les coordonnées du curseur de la souris
                
        } // FIN while


    Merci de votre aide ^^

    ++
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      7 juin 2006 à 18:11:42

      Tu commences mal
      Edit: Page de l'auteur
      La méthode, pour ce genre de fantaisie est:
      quand on enfonce le clic gauche, on commence la fonction de deplacement ( booleen = TRUE
      quand on relache le clic gauche, on arrete la fonction de deplacement ( boolen = FALSE )
      quand on bouge la souris, si booleen = TRUE, on bouge le calque, sinon, on le laisse la
      la page html:

          <div id="idDuBloc">
          hu?
          <form>
          <input type="submit" onmousedown="javascript:beginDrag('idDuBloc',event);" onmousemove="javascript:drag(event);" onmouseup="javascript:endDrag();" onmouseout="javascript:endDrag();" />
          </form>
          </div>
          <script type="text/javascript">
               // <![CDATA[
                      positionne('idDuBloc', '33px', '143px');
              isDragging = false;
               // ]]>

          </script>

      33px = margin-left: 33px;
      143px = margin-top: 143px;



      /***************************************
      ****************************************
      ****************************************
      *********fonction drag and drop************
      ****************************************
      ****************************************
      ***************************************/

      /***************************************
      *************Réalisé par oli.**************
      **********http://blog.oli-web.com**********
      ***************************************/

      var isDragging = false;
      var objectToDrag;
      var obj;
      var ecartX;
      var ecartY;
      var curX;
      var curY;

      function positionne(p_id, p_posX, p_pos_Y){
              document.getElementById(p_id).style.left = p_posX;
              document.getElementById(p_id).style.top = p_pos_Y;
      }

      function getPositionCurseur(e){
              //ie
              if(document.all){
                      curX = event.clientX;
                      curY = event.clientY;
              }
             
              //netscape 4
              if(document.layers){
                      curX = e.pageX;
                      curY = e.pageY;
              }
             
              //mozilla
              if(document.getElementById){
                      curX = e.clientX;
                      curY = e.clientY;
              }
      }

      function beginDrag(p_obj,e){
              isDragging = true;
              objectToDrag = document.getElementById(p_obj);
              getPositionCurseur(e);
              ecartX = curX - parseInt(objectToDrag.style.left);
              ecartY = curY - parseInt(objectToDrag.style.top);
      }

      function drag(e){
              var newPosX;
              var newPosY;
              if(isDragging == true){
                     
                      getPositionCurseur(e);
                      newPosX = curX - ecartX;
                      newPosY = curY - ecartY;

                      objectToDrag.style.left = newPosX + 'px';
                      objectToDrag.style.top = newPosY + 'px';
                     
              }
             
      }

      function endDrag(){
              isDragging = false;
      } 
      /***************************************
      ****************************************
      ****************************************
      *******fin fonction drag and drop**********
      ****************************************
      ****************************************
      ***************************************/



      Euh, j'espere que j'ai été clair :D
      • Partager sur Facebook
      • Partager sur Twitter
        7 juin 2006 à 18:39:00

        C'est exactement ce que je cherchais à faire mais le script bug parfois dans le sens où la fenêtre continue à bouger alors que je n'appuie pas sur le bouton.
        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          7 juin 2006 à 18:54:52

          Oui, je sais, c'est pour ca quej'ai rajouté un paramètre :)
          Si o prend la fonction telle que l'auteur nous la donne.
          Pour arreter le mouvement, il faut qu'on relache le bouton en étant sur le boutton.
          Hors, si on vas assez vite, on sors du boutton.

          c'est pour ca qu'il faut rajouter onmousetout="javascript:endDrag()"
          Comme ca quand on sort du truc, ca arrete de bouger ;)
          • Partager sur Facebook
          • Partager sur Twitter

          [JS] Evements liés à la souris

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