Exécuter une fonction que si onmousedown et onmousemove sont actionnés

**xess91** · 02/01/2010, 10h15

Bonjour à tous,

Je souhaite exécuter une fonction lorsque le clic gauche est appuyé et que l'on bouge la sourie.

Comment fairiez-vous ?

merci à tous pour vos réponses.

**SpaceFrog** · 02/01/2010, 10h29

ondrag ?
voire ondragstart

**xess91** · 02/01/2010, 10h58

J'ai regardé sur google "ondragstart" j'ai pas trouvé de doc !?

Edit:

Bon j'ai fait ça : "c'est inspiré d'un script déjà éxistant"

Le script à pour but de dérouler la page sans utiliser la roulette ou la scroll bar. Pour dérouler la page il suffit de cliquer gauche appuyé et déplacer la sourie soit vers le haut soit vers le bas.

Pour descendre puis remonter dans la page pas besoin de décliquer!

Pour tester le script c'est par ici.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
	<head>
		<script type="text/javascript">
var down = 0;
 
//défini l'état de la souris sur le bloc, mouseDown : 'down = 1' sinon 'down = 0'
function setD(a,e)
{
	down = a;
	//initialise les variables
 
	//position initiale de la souris lorsqu'on clique sur le bloc
	if(e.pageX) // selon le navigateur (ici pour firefox et peut-être autre...)
	{
		init_y = e.pageY;
	}
	else if(e.clientX) // (ici pour Internet Explorer et peut-être autre...)
	{
		init_y = e.clientY;
	}
	else // (ici pour Internet Explorer et peut-être autre...)
	{
		init_y = e.y;
	}
 
	 div_y = document.documentElement.scrollTop;
}
 
//fonction qui exécute le déplacement du bloc
function drag(e)
{
	//si la souris est 'cliquée' sur le bloc
	if(down==1)
	{
		//on récupère la position de la souris au moment de l'appel de la fontion
		if(e.pageX) // selon le navigateur (ici pour firefox et peut-être autre...)
		{
			pos_y = e.pageY;
		}
		else if(e.clientX) // (ici pour Internet Explorer et peut-être autre...)
		{
			pos_y = e.clientY;
		}
		else // (ici pour Internet Explorer et peut-être autre...)
		{
			pos_y = e.y;
		}
 
		dy = pos_y - init_y; //distance entre la position initiale et la position actuelle en y
		//déplace le bloc à sa nouvelle position ( -1 +1 pour qu'il reconnaisse que c'est un calcul...)
		window.scrollTo(0,div_y + dy);
	}
}
 
		function disableselect(e)
			{
			return false
			}
 
		function reEnable()
			{
			return true
			}
 
		//if IE4+
		document.onselectstart=new Function ("return false")
 
		//if NS6
		if (window.sidebar)
			{
			document.onmousedown=disableselect
			document.onclick=reEnable
			}
 
</script>
	</head>
<body style="margin:0;padding:0;background:gray;" onMouseDown="setD(1,event);" onMouseMove="drag(event);" onMouseUp="setD(0,event);">
<div style="width:950px;height:1500px;margin:auto;background:url('developpez.jpg');">
</div>
</body>
</html>

Je rencontre des problèmes au niveau de la réactivité par apport au mouvement de la sourie.

Sur Moz, safari, opera et chrome il y a une latence entre le changement de mouvement de la sourie et le "scrolling" de plus le défilement est très rapide. Pour une fois sur IE ça fonctionne bien. Je ne suis pas sur que ça soit un bon signe.

Merci à tous vos réponses.

**SpaceFrog** · 02/01/2010, 13h51

on ne doit pas avoir le meme google
ondragstart - Recherche Google

**xess91** · 02/01/2010, 14h20

Merci spacefrog,

J'ai trouvé une doc

.

Parcontre cela ne réglera pas mon problème de latence dans mon script avez une solution à me proposer.

Car je ne vois pas comment prendre en compte le changement de sens de la sourie lorsque l'on ne relache pas le click.

**SpaceFrog** · 02/01/2010, 14h23

http://www.developpez.net/forums/d85...nees-y-souris/

**xess91** · 02/01/2010, 14h31

Je connais c'est mon post !

Effectivement on récupère la position de la sourie, mais dans mon application j'incrémente le scroll avec "window.scrollTo(0,div_y + dy);", soit la position de la sourie + le scrollTop.

Et tant que je ne suis pas repassé par le point de départ de la fonction, ça continue d'incrémenter dans le mauvais sens.

Envoyé par xess91

...Le script à pour but de dérouler la page sans utiliser la roulette ou la scroll bar. Pour dérouler la page il suffit de cliquer gauche appuyé et déplacer la sourie soit vers le haut soit vers le bas.

Pour descendre puis remonter dans la page pas besoin de décliquer!

Pour tester le script c'est par ici.

Je rencontre des problèmes au niveau de la réactivité par apport au mouvement de la sourie.

Sur Moz, safari, opera et chrome il y a une latence entre le changement de mouvement de la sourie et le "scrolling" de plus le défilement est très rapide. Pour une fois sur IE ça fonctionne bien...

Je ne sais pas si je suis clair, j'ai mis un exemple en ligne dans ma première réponse. Sinon c'est ici

Ou alors peut-être que la solution est dans l'exemple que tu m'as donné et que j'ai loupé quelque chose!

**SpaceFrog** · 02/01/2010, 17h07

a priori tu n'incrémentes pas sur la bonne valeur, ça scrolle quand on bouge la souris dans n'importe quel axe ...

**xess91** · 02/01/2010, 18h13

ça m'aide pas vraiment

en plus c'est pas le cas, ça ne scroll pas si tu bouges de gauche à droite. Sur internet explorer la réactivité est nettement moin sensible.

En fait:

=> à l'événement onmousdown la position du curseur est stocker.

=> à l'événement onmousemouse la valeur de scrollTo est incrémenté ou décrémenté en coordonnée "y".

Et si par exemple on commence le onmousmouve vers le bas et que l'on change d'orientation pour aller vers le haut le script commencera à décrémenter que lorsque le curseur sera repassé par la position stocké lors du onmousedown.

C'est de la que vient la latence. Et mon problème est que je ne sais pas et je ne vois pas comment faire en sorte que cela ne se produise pas...

**SpaceFrog** · 02/01/2010, 18h26

ça scrolle sous ffx si tu bouges de droite à gauche ....

Pour debugguer avant de lancer le scroll perso j'afficherais la valeur du scroll et les valeurs de x et y dans un tableau de bord d'inputs pour voir ce qui se passe ...

**xess91** · 02/01/2010, 18h30

J'ai fait un edit dans ma précédente réponse...je sais d'ou vient le problème mais je ne sais pas comment y remédier !!! et je me

**SpaceFrog** · 02/01/2010, 19h11

passe par une variable flag que tu peux nommer up
que tu mets à true ou a false selon le sens d'incrémentation

**xess91** · 02/01/2010, 19h17

Merci je vais explorer ça mais sans certitude de réussite...la suite demain dans le prochain épisode.

**xess91** · 03/01/2010, 13h35

Bonjour à tous,

voici la suite et fin du problème, c'est tout simplement incompréhensif pour moi, après multiple bidouillage hazardeux, je suis arrivé à mes fins, mais est-ce la bonne solution ? en tout ça marche...

Voici le script final j'ai juste changé une ligne en divisant les paramètres par deux et ça marche:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
var down = 0;
 
function setD(a,e)
{
	down = a;
 
	if(e.pageX)
	{
		init_y = e.pageY;
	}
	else if(e.clientX)
	{
		init_y = e.clientY;
	}
	else
	{
		init_y = e.y;
	}
 
	 div_y = document.documentElement.scrollTop;
}
 
function drag(e)
{
	if(down==1)
	{
		if(e.pageX)
		{
			pos_y = e.pageY;
		}
		else if(e.clientX)
		{
			pos_y = e.clientY;
		}
		else
		{
			pos_y = e.y;
		}
 
                          /*version de départ: dy = pos_y - init_y;*/
		dy = (pos_y - init_y)/2;/*cette ligne*/
 
		val = div_y + dy;
 
 
		window.status = 'coord. en y au clic:'+init_y+' la position de la sourie:'+pos_y+' la différence:'+dy+' le scroll top plus le calcul:'+val;
 
		window.scrollTo(0, val);
	}
}

Je ne comprend pas pourquoi cette opération résoud le problème, c'est pour ça que je vais laisser le sujet ouvert dans l'espoire que quelqu'un puisse me donner une explication logique, car comme j'ai dis précédemment, ma réussite est un vrai hazard !

Merci à tous pour vos réponses

.

**SpaceFrog** · 03/01/2010, 13h39

je serais toi je collerais un Math.round ou un floor sur le resultat de la division par deux ...
un scrollTop a virgule ...

**xess91** · 06/01/2010, 17h05

Bon me revoila,

Le problème à été résolut sur IE, Mozzila, opera mais pas google chrome.

Je sais pas quoi vous dire de plus tout est dans les réponses précédentes.

Exécuter une fonction que si onmousedown et onmousemove sont actionnés

JavaScript

Discussions similaires

Partager

Partager