Discussion :

[robin des bulles]

je fais un script sur le deplacement d'objet a la souris, mais probleme, lorque je veux calculer la position de la souris sur le div (c'est a dire : position de la souris - position du div) il me retourne NaN (not a number) : Comment contournet ceci ?

le calcul problematique :
positionDiv_x = e.pageX - objetADeplacer.style.left;

le code : (75 lignes avec plein de commentaires)

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
/*			Fonction qui permet de deplacer un div (compatibe Firefox 1.5 et +, Internet Explorer 6 et +).
	A placer dans le head : 		<script language=JavaScript src='deplacerDiv.js'></script>
	A placer dans la zone declancheur : 	onMouseDown='clicEnfonce()' onMouseUp='clicRelache()'
	A placer dans le div : 			style='filter: alpha(opacity=100); -moz-opacity: 1; position:absolute; top:0; left:0;'
	On considère que l'objet à la structure minimale suivante : 
	<div><!-- Objet à deplacer -->
		<table>
			<tr>
				<td><!-- Cellule declenchant le déplacement sur clic -->
				</td>
			</tr>
		/table>
	</div>
*/
 
/*Initialisation des variables*/
clicEnCours = false;//renvoie vrai si le clic gauche est maintenu
//position originelle du div /*en amelioration mais ne marche pas*/
//positionDiv_x = 0;
//positionDiv_y = 0;
 
//Dès que l'on bouge la souris on execute deplacement()
document.onmousemove = deplacement;
if (navigator.appName.substring(0,3) == "Net")//compatibilité Internet Explorer
document.captureEvents(Event.MOUSEMOVE);
 
function deplacement(e)//e indique que l'on utilise les evenements
{
	//on recupere la position de la souris par une méthode dépendante du navigateur
	souris_x = (navigator.appName.substring(0,3) == "Net") ? e.pageX: event.x+document.body.scrollLeft;
	souris_y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	if (clicEnCours)//Lorsqu'on maintien le clic enfoncé
	{
		//nouvelle position du div = position de la souris - position de la souris sur le div
		positionDiv_x = souris_x - positionSourisSurDiv_x;
		positionDiv_y = souris_y - positionSourisSurDiv_y;
		//on assigne cette nouvelle position au div
		objetADeplacer.style.left = positionDiv_x
		objetADeplacer.style.top = positionDiv_y
		/*Si on change de zone
		on coupe l'objet fantome et on le colle dans une nouvelle position dans l'arborescence*/
	}
}
 
 
function clicEnfonce(objetCourant)
{
	//Objet à deplacer par rapport à l'objet courant
	objetADeplacer=(((objetCourant.parentNode).parentNode).parentNode).parentNode;
	//position originelle du div
	positionDiv_x = objetADeplacer.style.left;//marche pas
	positionDiv_y = objetADeplacer.style.top;//marche pas
	//position de la souris sur le div = position de la souris - position originelle du div
	positionSourisSurDiv_x = souris_x - positionDiv_x;
	positionSourisSurDiv_y = souris_y - positionDiv_y;
 
	//comme on clic on peut deplacer le div
	clicEnCours = true;
	//on transparencie le div a 50%
	(document.all) ? objetADeplacer.filters.alpha.opacity=50 : objetADeplacer.style.MozOpacity=.5;
	//on passe d'une position relative (implentée dans une arboresence) à absolue (hors de la structure de la page) pour pouvoir deplacer l'objet : 
//	objetADeplacer.style.position=absolute;
}
 
function clicRelache()
{
	//	objetADeplacer.style.position=relative;//on revient en position relavive
	//on remet l'opacité a 100%
	(document.all) ? objetADeplacer.filters.alpha.opacity=100 : objetADeplacer.style.MozOpacity=1;
	//si on relache le clic on ne deplace plus le div 
	clicEnCours = false;
	//on purge les variables
	positionSourisSurDiv_x=0;
	positionSourisSurDiv_y=0;
}/*			*** By Robin des Bulles ***			*/

voila j'espere etre assez clair !

merci !!!

[robin des bulles]

il suffisait d'utilisé parseInt :

positionDiv_x = e.pageX - parseInt(objetADeplacer.style.left,10);