addition hauteur et curseur
:salut:
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:
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 !!!