Récupérer nouvelle position element (drag and drop)

Par Jean Sérien, il y a 1 an

Javascript

Bonjour à tous,

Dans le code ci-dessous qui marche, je cherche à obtenir les nouvelles positions de chaque élément de la liste pour pouvoir actualiser la bdd, or , malgré que les éléments soient bien déplacés, impossible d'accéder à leur nouvel index, c'est toujours l'ancien index qui est renvoyé ...

J'ai essayé de capter le nouvel index après le drop et le dragend, rien ne change, c'est toujours l'index à l'ouverture de page qui est renvoyé malgré un nouvel querySelector.

D'autre part, la fonction actualiserNumerotation() n'a pas non plus l'effet escompté.

Je suppose qu'il faut utiliser un autre eventListener pour capter les derniers changements dans le DOM mais lequel ?

Merci de votre aide

const sortableList = document.querySelector(".sortable-list"); let items = document.querySelectorAll(".item"); let listItems = Array.from(items); const numerotationListe = document.querySelectorAll(".numerotation-item"); items.forEach((item) => { item.addEventListener("dragstart", () => { //Ajout de la classe "dragging" après délai setTimeout(() => item.classList.add("dragging"), 0); }); item.addEventListener("dragend", () => { //Annulation de la classe "dragging" item.classList.remove("dragging"); //Actualiser la numérotation actualiserNumerotation(); //Création du tableau de positions des items dans la liste listItems.forEach((item) => { let itemId = item.dataset.id; let position = listItems.indexOf(item); // console.log("Position : ", position, "id : ", itemId); }); }); }); const initSortableList = (e) => { e.preventDefault(); const draggingItem = sortableList.querySelector(".dragging"); //Récupérer tous les items exceptés ceux en mouvement let siblings = [...sortableList.querySelectorAll(".item:not(.dragging)")]; //Recherche l'élément après lequel l'élément déplacé doit être placé let nextSibling = siblings.find((sibling) => { return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2; }); //Insertion de l'item à la nouvelle place sortableList.insertBefore(draggingItem, nextSibling); }; sortableList.addEventListener("dragover", initSortableList); sortableList.addEventListener("dragenter", (e) => e.preventDefault()); //actualiser numérotation de liste const actualiserNumerotation = () => { for (let i = 0; i < numerotationListe.length; i++) { numerotationListe[i].textContent = i + 1; } console.log("succès numérotation"); };

D'autre part,faut-il mettre en place un setTimeOut pour éviter les requêtes trop fréquentes au serveur ?

2 réponses

Smith john, il y a 1 an

Salut, ton probleme vient du fait que tu utilises la liste d'origine pour calculer tes nouveau index, tu dois re-récupérer ta nouvelle liste apres le dragend, idem dans ta fonction actualiserNumeration tu dois re-récupérer ta liste.

Pour les requêtes normalement si tu les fait au dragend ca devrait passer, faut que tu test.

listItems.forEach((item) => { // <== liste à modifier let itemId = item.dataset.id; let position = listItems.indexOf(item); // console.log("Position : ", position, "id : ", itemId); }); const actualiserNumerotation = () => { for (let i = 0; i < numerotationListe.length; i++) { // <== liste à modifier numerotationListe[i].textContent = i + 1; } console.log("succès numérotation"); };
Jean Sérien, il y a 1 an

Merci d'avoir répondu Smith John

J'ai donc rajouté de nouveaux listeners dans la fonction "dragend" qui prennent un cliché des nouvelles positions et tout fonctionne à merveille...