Discussion :

[erazkan]

Bonjour à tous!

J'ai un souci avec des variables.
Voici le contexte : je cherche à créer des effets sympatiques avec un jeu de dames en AJAX. Pas de souci à ce niveau là, je fais mes tests, mes drag&drops tournent, c'est le bonheur.

Là où c'est moins le bonheur, c'est le passage de variables. En effet, quand je prends un Draggable pour le déplacer, la position du pion est normalement sauvée dans deux variables globales : dragx et dragy. Problème : quel que soit le pion, le dragx et dragy sauvés correspondent à ceux du dernier pion créé!
Le pire est que la création du Draggable a lieu dans une boucle for, avec des variables de position posx et posy uniques!
Ce qui est, pour savoir si un déplacement de pion est régulier, est assez problématique...

Ma fonction JS, qui lit la réponse reçue du serveur (fichier XML)

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
// Prend en compte la réponse reçue du serveur
function handleServerResponse()
{
	//lecture du message du serveur
	var xmlResponse = xmlHttp.responseXML;
 
	//intercepte les probables erreurs avec IE
	if(!xmlResponse || !xmlResponse.documentElement)
		throw("Structure XML invalide:\n" + xmlHttp.responseText);
	//intercepte les erreurs sous Firefox
	var rootNodeName = xmlResponse.documentElement.nodeName;
	if(rootNodeName == "parseerror")
		throw("Structure XML invalide:\n" + xmlHttp.responseText);
 
	//obtient l'élément document de XML --> <echiquier>
	//xmlRoot = xmlResponse.documentElement;
	xmlRoot = xmlResponse.documentElement;
 
	/* Récupérer la liste des lignes  */
	var lignes = xmlRoot.getElementsByTagName('ligne');
	var html = ''; /* Présentation HTML de l'échiquier */
 
	/* Nombre de lignes */
	count = lignes.length;
// alert(count);
	for(var i = 0; i < count; i++)
	{ /* POUR CHAQUE ligne */
 
 
		var cases = lignes[i].getElementsByTagName('case');
// alert(cases.length);
		for(var j = 0; j < 10; j++)
		{
 
			var couleurc = cases[j].getElementsByTagName('couleurc').item(0).firstChild.data;
			//alert(couleurc);
			var posx = cases[j].getElementsByTagName('x').item(0).firstChild.data;
			//alert(posx);
			var posy = cases[j].getElementsByTagName('y').item(0).firstChild.data;
			//alert(posy);
 
 
				//alert(classep + '  ' + couleurp);
				if(couleurc == "blanc");
				else
				{
 
				/*********************************************/
			//var pions = cases[j].getElementsByTagName('pion').item(0);
 
				//alert('couleur case noir');
 
				var pions = cases[j].getElementsByTagName('pion');
 
				//alert(pions);
 
 
				//var fctclasse = pions[0].getElementsByTagName('classe');
				var fctclasse = pions[0].getElementsByTagName('classe');
				var classep = fctclasse.item(0).firstChild.data;
 
 
				var fctcoul = pions[0].getElementsByTagName('couleur');
				var couleurp = fctcoul.item(0).firstChild.data;
 
 
				var fctid = pions[0].getElementsByTagName('id');
				var idp = fctid.item(0).firstChild.data;
 
				var tmp = "pion"+ couleurp + idp;
 
				//alert('classep: ' + classep + ' couleurp: ' + couleurp);
 
				/*********************************************/
 
 
					if(classep == 'vide' && couleurp == 'vide');
 
 
					else if(classep == 'pion' && couleurp == 'blanc')
					{
						html = '<div id="' + tmp  + '"><img src="images/pion_blanc.gif"/></div>';
						var elem = 'noir' + posy + posx;
						myDiv1 = document.getElementById(elem);
						myDiv1.innerHTML = html;
						html = '';
 
						//|| rend draggable
						var tmp2 = 'dragB'+idp;
 
						// MARCHE, MAIS COMMENT LUI FAIRE COMPRENDRE LES BONS posx et posy?
						var tx = posx;
						var ty = posy;
						var tclassep = classep;
						var tcouleurp = couleurp;
						var tdrag = tmp2;
						tmp2 = new Draggable(tmp, { revert:true, onStart: infos(tx, ty, tclassep, tcouleurp, tdrag) });
						//tmp2 = new Draggable(tmp, { revert:true});
						//alert(tmp2);
 
					}
 
					else if(classep == 'pion' && couleurp == 'noir')
					{
						html = '<div id="' + tmp  + '"><img src="images/pion_noir.gif"/></div>';
						var elem = 'noir' + posy + posx +'';
						//alert(elem);
 
						myDiv2 = document.getElementById(elem);
						myDiv2.innerHTML = html;
						html = '';
 
						//|| rend draggable --> Répertorie le dernier pion noir parcouru
						var tmp2 = 'dragN'+idp;
						var tx = posx;
						var ty = posy;
						tmp2 = new Draggable(tmp, { revert:true, onStart: function(){ idrag = tmp2; dragx = tx; dragy = ty; classedrag = classep; couleurdrag = couleurp;} });
 
					}
 
					else if(classep == 'reine' && couleurp == 'blanc')
					{
						html = '<div id="' + tmp  + '"><img src="images/reine_blanc.gif"/></div>';
						var elem = 'noir' + posy + posx;
						//alert(elem);
						myDiv3 = document.getElementById(elem);
						myDiv3.innerHTML = html;
						html = '';
 
						//|| rend draggable
						var tmp2 = 'dragB'+idp;
						tmp2 = new Draggable(tmp, { revert:true, onStart: function(){ infos(posx, posy, classep, couleurp, tmp2); } });
					}
 
					else if(classep == 'reine' && couleurp == 'noir')
					{
						html = '<div id="' + tmp  + '"><img src="images/reine_noir.gif"/></div>';
						var elem = 'noir' + posy + posx;
						//alert(elem);
						myDiv4 = document.getElementById(elem);
						myDiv4.innerHTML = html;
						html = '';
 
						//|| rend draggable
						var tmp2 = 'dragN'+idp;
						tmp2 = new Draggable(tmp, { revert:true, onStart: function(){ infos(posx, posy, classep, couleurp, tmp2); } });
					}
 
				}
		}
 
	}
 
 
}

Ma fonction infos, avec les variables globales utilisées

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
 
var iddrag; // Identité du Draggable
var classedrag; // Sert à stocker la classe du dragable (pour la fonction test_drop)
var couleurdrag; // Garde en mémoire la couleur du pion (pour la fonction test_drop)
var dragx; // Position avant déplacement d'un pion, pour comparaison. Initialisé au onDrag d'un pion
var dragy; // Idem mais en ordonnée
 
	function infos(ax, ay, aclass, acoul, drag)
		{
			//alert("test");
 
			iddrag = drag;
			classedrag = aclass;
			couleurdrag = acoul;
			dragx = ax;
			dragy = ay;
 
		}

[le_chomeur]

a la vue du script je vois que tu as un certain niveau de compétence , donc le mieux serais que tu le débug en pas a pas via firebug

ou ... mettre un alerte au moment au tu relaches ton pion pour afficher les coordonnée avant enregistrement

[bigboomshakala]

bonjour,

effectivement vu que dragx et dragy sont des variables globales tu ne pourras jamais obtenir que les dernières coordonnées enregistrées...

il te faut stockées les positions de toutes les pièces. où? ça c'est toi qui voit. ça peut être un tableau, un objet json, ou stocker directement dans les objets qui te servent de "pièces" (je n'ai pas regardé en détail donc je ne sais pas ce que sont tes pièces).

tu peux créer de nouvelles propriétés aux éléments HTML, genre

Code :

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

monDiv.dragx = 10; monDiv.dragx = 20; // monDiv est un <DIV>

[erazkan]

Alors, j'ai bien suivi ton conseil, et j'ai créé deux variables globales pour chaque pion. Et ça m'a permis de trouver la source du problème.

En fait, il semble que le problème vient d'AJAX, ou plutôt des Draggables, qui se déclenchent au moment de la création des draggables (je n'ai mis que onStart en propriété), mais ne marchent pas au déplacement ultérieur de ceux-ci. Ce qui fait que dragx et dragy sont à la position du dernier pion, et ne changent pas.

Serait-il possible de déplacer ce topic dans AJAX, ou dois-je l'indiquer comme résolu en Javascript et en ouvrir un autre dans le forum AJAX? Merci.

[le_chomeur]

Salut
Je pense que l'on peut traiter ton sujet ici puisqu'il s'agit plus de javascript que d'ajax en lui même je pense ...

Je viens de relire ton code , et je pense que tu pourrais te simplifier la vie, en créer une collection de pion , tu as déja un objet de type pion, avec comme informations :

Code :

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

1
2
3
4
5
6
 
var iddrag; // Identité du Draggable
var classedrag; // Sert à stocker la classe du dragable (pour la fonction test_drop)
var couleurdrag; // Garde en mémoire la couleur du pion (pour la fonction test_drop)
var dragx; // Position avant déplacement d'un pion, pour comparaison. Initialisé au onDrag d'un pion
var dragy; // Idem mais en ordonnée

tu n'as donc que les propriétés des pions, pourquoi ne pas implémenté une méthode à l'intérieur qui au moment du drag, permet d'enregistrer ses coordonnées en ajax ?

de plus en utilisant une collection tu pourrais gèrer la suppression plus facilement et gagner en temps d'exécution sur tes boucles

exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
//Cette fonction permet de créer des collections d'objet de n'importe quel type
function CreateCollection(ClassName)    
{
    var obj=new Array();
    eval("var t=new "+ClassName+"()");
    for(_item in t)
        {
            eval("obj."+_item+"=t."+_item);
        }
    return obj;
}

Utilisation :
ou "TypeDeCollection" doit corespondre a ta méthode gérant ta collection ( une liste de pion ou autre

Code :

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

1
2
3
 
//création d'une liste de pion
	var mesPions = new CreateCollection("TypeDeCollection");

J'espère ne pas t'avoir trop embrouillé l'esprit , sinon post un code complet ( html + javascript ) nous verrons ce que l'on peut faire pour t'aider