Estoy tratando de construir un sistema de arrastrar y soltar, que resalta las zonas de colocación disponibles al arrastrar un elemento de arrastre sobre ellas. Hago esto agregando una clase a una zona de colocación, cuando un elemento de arrastre adecuado pasa sobre ella. Sin embargo, cuando el elemento de arrastre se va (evento "dragleave"), a veces la clase no se elimina y el resaltado dice. ¿Cuál podría ser una posible razón para este comportamiento y cómo lo soluciono?

Ejemplo del error:

Extracto del código:

 // drag events element.addEventListener("dragenter", (event) => { event.stopPropagation(); event.preventDefault(); checkBacktrack(event.target); }); element.addEventListener("dragleave", (event) => { event.stopPropagation(); event.preventDefault(); if (event.target === nodeStack.at(-1)) { popNodeStack(); } }); // Node stack functions (nodeStack = stack of nodes to keep track): const checkBacktrack = (element) => { for (let i = nodeStack.length - 1; i >= 0; i--) { const topNode = nodeStack.at(-1); if (topNode === element) { return true; } else if (topNode.contains(element)) { pushNodeStack(element); return true; } else { popNodeStack(); } } pushNodeStack(element); return false; }; const popNodeStack = () => { const removedNode = nodeStack.pop(); tryPopHighlight(removedNode); }; const pushNodeStack = (element) => { nodeStack.push(element); tryPushHighlight(element); }; //Highlight functions (highlightStack = stack of elements to highlight): const tryPushHighlight = (element) => { if (_isValidDropzone(element)) { pushHighlight(element); } }; const tryPopHighlight = (element) => { if (highlightStack.at(-1) === element) { popHighlight(); } }; const pushHighlight = (element) => { element.classList.add("drag-under-item"); const currentHighlight = highlightStack.at(-1); if (currentHighlight) { currentHighlight.classList.remove("drag-under-item"); } highlightStack.push(element); }; const popHighlight = () => { setTimeout(() => { const removedHighlight = highlightStack.pop(); if (removedHighlight) removedHighlight.classList.remove("drag-under-item"); const newHighlight = highlightStack.at(-1); if (newHighlight) newHighlight.classList.add("drag-under-item"); }); };