Tri de cartes par drag and drop et validation

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

Citation:

---

Envoyé par kourpitz

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 ?

Citation:

---

Envoyé par mathieu

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 ...

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:

---

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.

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 ...

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.

Trop fort !
Effectivement, ça marche
Pourquoi je n'ai pas pensé au cache ... erreur de débutant
Vraiment merci beaucoup pour ce bon gros coup de main

Bonjour,
tout d'abord au moins deux remarques.
L'utilisation des éléments <table> n'est absolument pas nécessaire dans ton cas, voire même néfaste !

Une ID doit être unique dans une page alors que l'on retrouve trois <div id='container'> dans celle-ci.
De plus une ID ne devrait pas commencer par un chiffre sous risque de certains soucis.

Ceci étant je serais encore plus pragmatique en utilisant la fonction ci-dessous :

Code:

---

1 2 3 4 5 6

function setCookies() { const images = document.querySelectorAll(".container-drop img"); images.forEach((img, ind) => { document.cookie = `position_${ind+1} = ${img.id}`; }) }

---

on récupére les ID des images contenues dans l'élément de destination des drops pour lequel j'ai ajouté une class="container-drop".
Donc exit la suite de if().

Bonjour,
Merci pour toutes ces suggestions
Effectivement pour la suite de if{} c'est vraiment pas beau, mais c'est parce que j'ai testé plein de choses et au final j'en étais là
Je pensais bien netoyer tout cela avec une boucle
Je vais continuer à optimiser mon code avec toutes les propositions
Merci beaucoup