Problème avec onmousemoveRésolu

Question

Salut

J'ai fait quelque chose qui ressemble à un alert() en un peu plus joli (il s'agit de 3 div superposés à l'intérieur d'un autre).

      

      

      

Je voulais que msgBox puisse être dépacé dans la fenêtre, comme un alert. J'ai fait ceci :

 var dad    = false;
 var diff_x = 0;
 var diff_y = 0;
 
titreBox.onmousedown = function () {
      dad    = true;
      diff_x = 0;
      diff_y = 0;
}

titreBox.onmouseup = function () {
      dad    = false;
      diff_x = 0;
      diff_y = 0;
}

titreBox.onmousemove = function () {
      if (dad) {
            posx = event.x + document.body.scrollLeft;
            posy = event.y + document.body.scrollTop;
            if (!diff_x) diff_x = (posx - eval (msgBox.style.left.replace ("px", "")));
            if (!diff_y) diff_y = (posy - eval (msgBox.style.top.replace ("px", "")));
            msgBox.style.left = (posx - diff_x) + "px";
            msgBox.style.top = (posy - diff_y) + "px";
      }
}

dad permet de dire si on déplace ou pas.
diff_x et diff_y sont l'endroit ou l'on clique titreBox.

Ca fonctionne très bien tnt qu'on déplace lentement. Si on déplace vite et que le curseur sort du div, msgBox ne se déplace plus, et onmouseout n'a plus d'effet (donc quand je repasse sur titreBox après, même si j'ai relaché, celui-ci suit la souris).

Quelqu'un aurait une idée?

Merci d'avance

XtremDuke · Accepted Answer

Le mousemove doit se faire sur le document et non sur ta fenetre.

Voilà le fonctionnement d'un Drag :

onClick sur ta fenetre -> determination des coordonnées de ta fenetre par rapport au click + ajout de l'évenement mouseMove sur le document.
mouseMove du document - > on déplace la fenetre moins la difference click/fenetre qu'on a récuperé précédement.
mouseUp du document -> on supprime les listener d'évenement.

Si tu veux un exemple, jette un coup d'oeuil sur mon framework perso (en dév.) à l'adresse suivante :

http://siteecom.net/demo/joof.api.js (objet Drag)

Démo sur :

http://siteecom.net/demo/drag.html

cs_ov3rdoze · Answer

Aïe. C'est bien plus compliqué que ce que je pensais.
Mais le fait d'appliquer sur le document ne risque pas d'interférer avec d'autres évènements?

Par exemple si je mets une action dans un onmouseup d'un bouton, celui du document ne va pas être executé aussi?

Sinon merci pour le lien.

cs_ov3rdoze · Answer

En tout cas au stade où j'en suis ça me convient très bien

XtremDuke · Answer

"Mais le fait d'appliquer sur le document ne risque pas d'interférer avec d'autres évènements?"

Si tu utilises le gestionnaire d'évènements et que tu stoppes la propagation sur les évènements il n'y a aucun risque.

cs_ov3rdoze · Answer

Il va peut-être falloir que je me trouve des cours... Il y a beaucoup de notions qui m'echappent.
Mais en tout cas merci

Problème avec onmousemove

5 réponses

Votre réponse

Discussions similaires