Problème avec onmousemove

Résolu
Signaler
Messages postés
414
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
23 septembre 2014
-
Messages postés
414
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
23 septembre 2014
-
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

5 réponses

Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
4
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
Messages postés
414
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
23 septembre 2014

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.
Messages postés
414
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
23 septembre 2014

En tout cas au stade où j'en suis ça me convient très bien
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
4
"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.
Messages postés
414
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
23 septembre 2014

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