Discussion :

[kourpitz]

Bonjour,
En partant d'un tuto, et en explorant les ressources disponibles ici, j'ai créé un tri de 6 cartes : les cartes (verso) sont présentées en haut de l'écran, on va ensuite les glisser/déposer sur les positions du bas dans l'ordre de préférence. Puis le bouton valider affiche le recto des 6 cartes
Problème : si on fait le tri en une fois, ça fonctionne, mais si on décide de permuter des cartes sur la ligne du bas, ça fini par boguer. En fait, tant que les cartes sont entourées d’un cadre vert, c’est bon, mais dès qu’une carte reste en cadre gris, si on la permute avec une autre, la validation va boguer … évidemment, je ne trouve pas la solution
Précision : je suis parti d’un drag and drop qui permutait du texte. Dés que j’ai changé le texte en image, ça n’a plus fonctionné correctement
On peut tester ici : http://explorateurdelalune.free.fr/T...rteLegume.html

Je suis preneur de toutes suggestions
Merci beaucoup

[mathieu]

dès qu’une carte reste en cadre gris, si on la permute avec une autre, la validation va boguer

j'ai permuter les cartes dans la ligne du bas puis j'ai cliqué sur "valider" et je n'ai pas vu de souci.
qu'est ce qui ne vous convient pas ?

[kourpitz]

j'ai permuter les cartes dans la ligne du bas puis j'ai cliqué sur "valider" et je n'ai pas vu de souci.
qu'est ce qui ne vous convient pas ?

Par exemple : on descend toutes les cartes dans la ligne du bas en conservant le même ordre
Puis, on permute la 2 et la 3 (pomme et choux-fleurs)
La carte Pomme reste encadrée en vert mais choux-fleurs devient encadrée en gris
On permute la 1 et la 2 (poivron et choux-fleurs)
Les 2 cartes deviennent encadrées gris
On valide et on a deux fois la carte pomme et la carte choux-fleurs a disparu ...

[mathieu]

le souci quand vous inversez par exemple la 2e carte avec la 3e dans la ligne de bas, c'est que vous mettez bien à jour position_2 et position_3 dans les cookies. mais dans le code vous mettez seulement à jour position_2 et donc position_3 garde l'ancienne valeur.

au lieu de faire plusieurs variables de position vous pouvez tout stocker dans tableau et comme ça vous pouvez faire une boucle :

Code javascript :

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
 
// à l'initialisation :
	var positions = {
		"1" : "",
		"2" : "",
		"3" : "",
		"4" : "",
		"5" : "",
		"6" : "",
	};
 
 
// et ensuite dans ondrop : 
 
			Object.entries(positions).forEach(([index_depart, valeur_depart]) => {
 
				if (index_depart === div_depart) {
					positions[index_depart] = positions[div.id];
					document.cookie = "position_" + index_depart + " = " + positions[index_depart];
				}
 
			});
 
			positions[div.id] = str.substr(10, 1);
			document.cookie = "position_" + div.id + " = " + positions[div.id];

et une autre amélioration : à la place de stocker les positions dans une variable et dans un cookie, vous pouvez juste garder la variable et ensuite au clic sur un bouton vous envoyez les positions en javascript.

[kourpitz]

Je me doutais que c'était un problème de cette nature
Mais je viens de tester votre proposition et ça ne fonctionne pas mieux
Le code est beaucoup plus clair mais le problème persiste ...

[mathieu]

je viens de refaire le test sur votre page et je n'ai plus le souci.
vous avez surement l'ancien script en cache dans le navigateur.