Discussion :

[Myrtill]

Bonjour à tous.
Je cherche à implanter un petit drag & drop sur un page afin de classer des informations. Je n'y connais pas grand chose en javascript mais j'ai réussi à trouver des sources bien expliquées sur ce site
J'ai réussi à enlever ce qui était en trop et ajouter les fonctions nécessaires qui n'étaient pas présente dans les sources données mais fournies un peu plus haut.

Ce qui m'embete, c'est que le script source sur le site fonctionne très bien, quelque soit le navigateur (même si sous FF, la div que l'on déplace "disparait" au lieu de suivre les mouvements de la souris), mais le miens, qui reste un copier coller ne veut rien savoir. Je suppose que cela provient de ma page HTML et de la structure DOM ou quelque chose comme ca peut etre (je n'y connais rien )

Voici l'erreur que chaque navigateur me donne :
offsetParent is null or not an Object

Code incréminé :

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
function getPosition(e){
	var left = 0;
	var top  = 0;
 
	while (e.offsetParent){
		left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		e     = e.offsetParent;
	}
 
 
	left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
 
	return {x:left, y:top};
 
}

getPosition(e) étant appelée par :

Code :

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

1
2
3
4
5
6
function getMouseOffset(target, ev){
	ev = ev || window.event;
	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

Elle même appelée par mouseMove(ev) à divers endroit.
Target étant définie dans cette dernière par :

Code :

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

1
2
ev         = ev || window.event;
var target   = ev.target || ev.srcElement;

Sous IE et Opera :
Le script me donne l'erreur ci dessus mais fonctionne tout de même. Je peux déplacer une div et l'insérer correctement. A vrai dire, en désactivant les messages d'erreur javascript, on aurait l'impression que tout est beau.

Sous FF :
Même erreur, mais ma div ne suit pas le mouvement de ma souris. Elle vient se coller a gauche en dessous de mes fieldset. Etrangement, je peux tout de même la drop et cela fonctionne. C'est juste qu'elle n'arrive pas à suivre le mouvement de la souris.

Bon, j'ai enlever le code PHP et j'ai inscrit 3 petites div en brut pour vous permettre de tester. Je vous fourni les sources vu que le code JS est un peu gros.

Si vous avez une idée, je suis tout ouïe

[le_chomeur]

pourrais tu mettres une page de démo en ligne ?? car effectivement le code est assez gros ^^

[Myrtill]

La voila : http://myrtill.choup.net/map/

[le_chomeur]

il y a un problème du coté de la récupération de l'élément survolé / clické :

Code :

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

1
2
3
4
5
6
7
8
9
10
function mouseMove(ev){
	ev         = ev || window.event;
 
	/*
	We are setting target to whatever item the mouse is currently on
 
	Firefox uses event.target here, MSIE uses event.srcElement
	*/
	var target   = ev.target || ev.srcElement;
...

vérifis target

[Myrtill]

Et bien, ca parait con, mais je ne sais pas comment le tester ^^
D'après ma compréhension du code, Target est sensé contenir l'objet que l'on survole avec la souris.

Si je fais un alert(target), j'ai bien le type d'object html et un alert(target.id) me donne aussi correctement l'ID.

Du coup, je ne comprends pas vraiment :/


Edit : après moulte "débug" (spam d'alert un peu partout :o), je crois que je ne cherche pas au bon endroit xD. Ma fonction étant appelée un peu partout, je ne me suis focalisé que sur le premier appel qui lui fonctionne correctement. C'est ensuite que je dois chercher. Au moment ou on survole chaque Container, on vérifie la position et je crois que c'est la que ca plante.

Je vais chercher et si je trouve, je tag le sujet en résolu.


Edit 2 : Et bien voila, ca venait d'un autre appel de la fonction qui envoyait null :/ Chose étrange, cet appel se trouve un dans if qui est sensé justement s'assurer que la variable n'est pas null. Mais bon, ne maitrisant pas le code parfaitement, il se peut que j'ai loupé un truc J'ai donc a nouveau fait une vérif et cela fonctionne. Il ne me reste plus qu'une erreur dans la gestion des coordonnées de la souris avec IE (FF et Opera n'ont pas de soucis), et toujours ce petit problème de Div qui vient se caller a gauche au lieu de suivre les mouvements de la souris :/. Demo updated si certains veullent toujours aider.
Je tag le sujet résolu demain sinon :p


Edit 3 : Et ben voila, trouvé ^^.

Code :

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

dragHelper.style.left = mousePos.x - mouseOffset.x+'px';

Il suffisait de rajouter 'px', ce qui semble normal si on veut que la syntax soit correct .

Merci pour votre aide en tout cas