拖放不适用于动态插入的元素

Question

我有一个div，它是一个可拖动部分的列表。

然后我有一个如下所示的拖放脚本：

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>

一切都很完美（每个部分都可以拖放）。

然而，如果我没有使用静态 HTML：document.getElementById('list').insertHTML(//my draggable sections)，那么我的 js 脚本似乎不再工作了。我无法拖放我的部分。

我不明白为什么，似乎插入这些部分会动态改变一些东西，但我不明白是什么......有没有办法解决这个问题？

Answer 1

element.insertHTML() 你是element.insertAdjacentHTML()吗？
无论如何，我猜代码执行顺序有问题，它可能正在运行

const tasks = document.querySelectorAll('.task');

在您更改 .list 元素内的 html 之前。这意味着const tasks 最终是空数组（它实际上是空的 NodeList，但在这里没有变化）

另外，如果您没有任何特定理由使用insertAdjacentHTML，我建议您改用appendChild。

UPD

此外，每次您将新项目添加到列表时，您都必须将 eventListeners 添加到您添加的每个节点。