Obtenir la position de la souris sur une div

Slt tlm,

je suis nouveau sur ce site et il est vrai pas mal! J'ai deja appris pas mal de trucs!

J'aurais voulu savoir comment faire pour récupérer la position de la souris sur une div lorsqu'on clique dessus.

function stockerOrigine(event){

	event = event || window.event;
	xOrigine = (nav == "Net") ? event.pageX : event.x+document.body.scrollLeft;
	yOrigine = (nav == "Net") ? event.pageY : event.y+document.body.scrollTop;
	writediv("width", "xOrigine : "+xOrigine);
	writediv("height", "yOrigine : "+yOrigine);

}


function DragAndDrop(id_div){
	
	div = document.getElementById(id_div);
	stockerOrigine(div.onclick);
	
}

<div id="mini_1" class="mini" style="left:100px;top:100px;" onclick="DragAndDrop(this.id);">mini_1</div>

J'ai essayé de vous faire un resumé de mon code, en gardant l'essentiel.
Ici, lorsque je clique sur la div "mini_1", ceci apparait:
xOrigine : undefined
yOrigine : undefined

J'ai beaucoup de mal a gérer les evenements!
J'ai lu le tuto de ce site sur le sujet, mais il ne m'a pas trop aidé, car je trouve qu'il ne donne finalement pas LA bonne solution à utiliser pour les utiliser et pour qu'ils restent compatibles entre FF et IE


Merci bp!
+++
Modifié par maxroucool (07 Jul 2007 - 00:35)

Salut maxroucool

quand tu dis

a écrit :

J'aurais voulu savoir comment faire pour récupérer la position de la souris sur une div lorsqu'on clique dessus.

Tu parles de la coordonnée relative par rapport au coin haut/gauche du div cliqué, ou bien de la position de la souris relative au browser ?

oui, je me suis mal exprimé, je voudrais récupérer les coordonnées relatives de la souris par rapport au coin haut/gauche de la div cliquée.

+++

Ok,

dans ce cas tu dois récupérer les positions tondiv.x et tondiv.y par rapport au point haut/gauche du document visible, puis faire la différence souris.x - tondiv.x et souris.y - tondiv.y, toujours par rapport à ce point. Ces différences correpondent aux coordonnées relatives de la souris à l'intérieur de ton div.

Au passage je te file la fonction de quirksmode qui te retourne les positions [x, y] d'un élément, en résumé ça donne quelque chose du genre :

function findPos(el) {
	var x = y = 0;
	if(el.offsetParent) {
		x = el.offsetLeft;
		y = el.offsetTop;
		while(el = el.offsetParent) {
			x += el.offsetLeft;
			y += el.offsetTop;
		}
	}
	return {'x':x, 'y':y};
}
			
mondiv = document.getElementById('mondiv');
mondiv.onclick = function(e) {
	var ev = e || window.event;
	var pos = findPos(this);
	var diffx = ev.clientX - pos.x;
	var diffy = ev.clientY - pos.y;
	alert(
		'Position relative en X : ' + diffx
		+ '\nPosition relative en Y : ' + diffy
	);
};

J'espere que ça t'ira,
@plouche.
Modifié par Ze Nenex (07 Jul 2007 - 14:01)

Je viens de tester ton script, et dans la console de FF, ca m'affiche "mondiv has no Proprieties" à la ligne : "mondiv.onclick = function(e) {"

je vois pas trop ce que ca signifie

maxroucool a écrit :
je vois pas trop ce que ca signifie

Cela signifie que "mondiv" n'existe pas encore au moment où tu exécutes ton code. Il faut soit que tu mettes ce script après "mondiv" dans le document, soit que tu utilises un gestionnaire d'événement "load".

ok, ben j'ai placé le script apres ma div, et la ca marche, seulement ca ne m'arrange pas trop, donc que dois-je mettre dans mon onload?

j'ai testé ceci, mais ca me donne le meme message d'erreur que tout a l'heure.

window.onload = function(e){
	mondiv = document.getElementById("mini_1");
}

En faisant :

window.onload = function(e){
	mondiv = document.getElementById("mini_1");
}
mondiv.onclick = ...

la variable mondiv placée à l'extérieur de l'événement onload n'est pas encore définie puisque cet événement n'est déclenché qu'au chargement complet de la page (images comprises).

Essai plutôt :

window.onload = function(){
	mondiv = document.getElementById("mini_1");
	mondiv.onclick = function(e) {
		var ev = e || window.event;
		var pos = findPos(this);
		var diffx = ev.clientX - pos.x;
		var diffy = ev.clientY - pos.y;
		alert(
			'Position relative en X : ' + diffx
			+ '\nPosition relative en Y : ' + diffy
		);
	};
};

Quant à la fonction "findPos", elle peut rester à l'extérieur.
Modifié par Ze Nenex (07 Jul 2007 - 14:52)

Ok merci, ca marche impec, mais j'ai toujours un probleme, c'est que je galère a gérer les evenements!

Je voudrais en faites mettre plusieurs div sur ma page, et que sur chacune de ces div s'applique cette fonction.

En gros je voudrais pouvoir appliquer cette fonction de cette façon:

<div id="mini_1" class="mini" style="left:105px;top:105px;" onclick="getRelativePos(this.id);">1</div>
<div id="mini_2" class="mini" style="left:215px;top:105px;" onclick="getRelativePos(this.id);">2</div>
...

J'ai fais cela, mais ca m'affiche "NaN", ce qui normal, puisque le "e" demandé dans la fonction n'est pas defini!

function getRelativePos(e,div){

	var mondiv = document.getElementById(div);
	
	var ev = e || window.event;

	var pos = findPos(this);

	var diffx = ev.clientX - pos.x;

	var diffy = ev.clientY - pos.y;

	alert(

		'Position relative en X : ' + diffx

		+ '\nPosition relative en Y : ' + diffy

	);

}

D'autre part, je serais tenté de mettre "var pos = findPos(mondiv);" à la place de "var pos = findPos(this);", mais c'est pire! pourquoi?


Merci bp de ta patience!!
Modifié par maxroucool (07 Jul 2007 - 16:11)

Je vais te laisser chercher un peu pour ce qui est de la technique, par contre pour les grandes lignes, je peux te dire ceci :

- On peut voir que tous les div qui reçoivent la fonction getRelativePos ont la même classe mini. Sache qu'il est possible de récupérer tous les éléments d'une même classe, dans un tableau, et de parcourir ce tableau pour programmer tes événements.

- Evite la définition d'événement via l'attribut html, préfère la méthode programmatique, c'est à dire celle-ci : monElement.onclick = maFuncRef; / function(e) {};. Ou mieux, passe par un gestionnaire d'événement.

- normalement, tu ne devrais pas avoir de NaN sur IE, car l'objet est associé à window et non envoyé en paramètre comme c'est le cas avec FF, d'où le var ev = e (FF) || window.event (IE) qui est une façade pour la compatibilité.

a écrit :
D'autre part, je serais tenté de mettre "var pos = findPos(mondiv);" à la place de "var pos = findPos(this);", mais c'est pire! pourquoi?

- Lorsque tu définis un événement, le contexte de la fonction déclenchée est l'objet html lui-même. Autrement dit, this = le div. Donc, la variable mondiv est indéfinie à l'intérieur de la fonction

En gros, le chemin à suivre :
1. récupérer les élément au onload de la page via leur classe CSS.
2. parcourir les éléments et leur attribuer une fonction onclick, sachant que le contexte de cette fonction changera à chaque fois pour être l'objet clické lui-même (pense à this).

OK merci Ze Nenex

J'ai réussi a appliqué ce que tu m'as dis de faire pour un script simple, seulement maintenant je dois intégrer tout ca dans un autre script un peu plus complexe, mais bien sur y'a un bug!
J'ai tout essayé et je vois pas pourquoi ca bug!

La console d'erreur me dis que "xDivOrigine is not defined", donc je vois pas trop ou je dois exécuter ma fonction getRelativePos.
J'ai essayé dans ma fonction DragAndDrop directement, ou bien dans ma fonction d'initialisation, avec "minis[i ].onclick = getRelativePos;".
Mais ni l'un ni l'autre ne marche. Le code est ici.

De plus, mon script a de gros probleme de compatibilité avec IE, et je ne vois pas pourquoi.

D'autre part, une petite question qui n'a pas trop de rapport, pourquoi ce code marche:

div = this;
left = div.style.left;

mais celui-la non:

left = this.style.left;

Merci bp!
+++