begin process at 2012 05 29 18:36:31
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Divers

 > 

Problème avec onmousemove


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Problème avec onmousemove

jeudi 12 juin 2008 à 09:44:09 | Problème avec onmousemove

ov3rdoze

Membre Club
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).
<div id="msgBox">
      <div id="titreBox"></div>
      <div id="contenuBox"></div>
      <div id="footerBox"></div>
</div>

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
jeudi 12 juin 2008 à 09:58:30 | Re : Problème avec onmousemove

XtremDuke

Réponse acceptée !
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
jeudi 12 juin 2008 à 10:08:03 | Re : Problème avec onmousemove

ov3rdoze

Membre Club
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.
jeudi 12 juin 2008 à 10:10:54 | Re : Problème avec onmousemove

ov3rdoze

Membre Club
En tout cas au stade où j'en suis ça me convient très bien
jeudi 12 juin 2008 à 10:15:20 | Re : Problème avec onmousemove

XtremDuke

"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.
jeudi 12 juin 2008 à 10:18:15 | Re : Problème avec onmousemove

ov3rdoze

Membre Club
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


Cette discussion est classée dans : style, msgbox, diff, dad, titrebox


Répondre à ce message

Sujets en rapport avec ce message

Style et Script [ par Pocel ] Débutant,je voudrai changer la couleur de la cellule d'un tableau à la sélection de cette dernière. Pour le moment j'applique un style au onClick, mai modification de l'attribut style en js avec netscape [ par tilla ] Bonjour,Je souhaite faire un roll-over textuel en changeant l'attribut style.display de la balise p.Pas de problème avec ie (évidemment)... mais impos z-index [ par MiTcH37 ] buenos dias...j'aimerai savoir comment modifier le z-index d'une div par le javascript...par exemple pour la hauteur c'est :document.all.NomDiv.style. Pbavec Netscape et le positionnement absolu [ par undine ] Netscape me fait des trucs bizarres : lorsque j'utilise un script pour placer un tableau aux coordonnées absolues (avec style.pixelLeft et style.pixel par dessous ou par dessous ...? [ par GuilleW ] voila .. il me faudrai un code du style :z-index:'100'mais dans une fonction ... je m'explique ...disons que j'ai deux en posi changer limage de fond d'un tableau [ par lumesh ] Salut,Bon oila, je suis a la recherche de la maniere pour modifier limage de fond d'une cellule d'un tableau avec javascript lors d'un rollover su cel Feuilles de style [ par mathieumg ] Bonjour j'aimerais faire une page avec différentes sortes de lien et de mousevers mais je ne sais pas comment. Je crois qu'il faut utiliser les feuill acces bouton [ par ben1 ] je suohaiterai vérifier que mes boutons sont bien actifs par .checked mais apparament ce ne fonctionne pas vraiment ... pourriez-vous m'aider?voici le javascript bouton checked function [ par ben1 ] je suohaiterai vérifier que mes boutons sont bien actifs par .checked mais apparament ce ne fonctionne pas vraiment ... pourriez-vous m'aider?> > voic centrer un menu en layer dans la page [ par jibchamonix ] Bonjour,Je dois centrer toutes les pages d'un site que je suis en train de développer. Le menu et les sous-menu développer sous forme de layer (calque


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,686 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales