Estoy desarrollando un juego de cartas para jugar en el navegador. Este es un proyecto para mi módulo de javascript, así que estoy aprendiendo a salir de él. Necesito mover una tarjeta de un lugar a otro, esto no es difícil si el div objetivo existe en index.html pero necesito apuntar a los niños y todos se crean dinámicamente. cuando cambio el objetivo a los niños con una nueva clase, el detector de eventos se rompió. Necesito ayuda para dirigirme con éxito a estos niños dinámicos.

 const card = getDOMElement(FLIPPED_CARDS_ID); card.addEventListener("mousedown", mouseDown); const mouseDown = (e) => { let prevX = e.clientX; let prevY = e.clientY; const mouseMove = (e) => { let newX = prevX - e.clientX; let newY = prevY - e.clientY; const rect = card.getBoundingClientRect(); card.style.left = rect.left - newX + "px"; card.style.top = rect.top - newY + "px"; prevX = e.clientX; prevY = e.clientY; }; window.addEventListener("mousemove", mouseMove); const mouseUp = () => { window.removeEventListener("mousemove", mouseMove); window.removeEventListener("mouseup", mouseUp); }; window.addEventListener("mouseup", mouseUp); };

el div afectado es el siguiente

 const flippedCardsDiv = getDOMElement(FLIPPED_CARDS_ID); const newFlippedCard = document.createElement("div"); newFlippedCard.classList.add("new-flipped-card"); const flippedCards = deck.dealOneCard(); newFlippedCard.innerHTML = getNewCardHtml(flippedCards[0]); flippedCardsDiv.appendChild(newFlippedCard);

Espero haber sido lo suficientemente claro al explicar mi problema. Gracias por adelantado.