Tengo un div que es una lista de secciones que se pueden arrastrar.
Luego tengo un script de arrastrar y soltar que se ve así:
const tasks = document.querySelectorAll('.task'); tasks.forEach(task => { task.addEventListener('dragstart', dragStart, false); task.addEventListener('dragenter', dragEnter, false); task.addEventListener('dragleave', dragLeave, false); task.addEventListener('dragover', dragOver, false); task.addEventListener('drop', dragDrop, false); task.addEventListener('dragend', dragEnd, false); }); function dragStart(e) { //do something }; function dragEnter(e) { //do something } function dragLeave(e) { //do somehting } function dragOver(e) { //do something } function dragDrop(e) { //do something } function dragEnd(e) { //do something } <div id="list"> <section id="1" class="task" draggable="true"> <p> Something here </p> </section> <section id="2" class="task" draggable="true"> <p> Something here </p> </section> ... </div>Todo funciona perfectamente (cada sección se puede arrastrar y soltar).
Sin embargo, si en lugar de tener un HTML estático, hago: document.getElementById('list').insertHTML(//my draggable sections) , entonces mi secuencia de comandos js ya no parece funcionar. No puedo arrastrar y soltar mis secciones.
No entiendo por qué, parece que insertar las secciones cambia algo de forma dinámica, pero no entiendo qué... ¿Hay alguna forma de solucionar este problema?
por element.insertHTML() ¿usted element.insertAdjacentHTML() ?
De todos modos, supongo que hay un problema con el orden de ejecución del código, probablemente se esté ejecutando
const tasks = document.querySelectorAll('.task'); antes de cambiar html dentro del elemento .list . Esto significa que const tasks terminan siendo una matriz vacía (en realidad es una lista de nodos vacía pero no importa aquí)
Además, si no tiene ninguna razón específica para usar insertAdjacentHTML , le recomendaría que use appendChild en su lugar.
UPD
Además, cada vez que agregue nuevos elementos a su lista, deberá agregar eventListeners a cada nodo que agregó.