Javascript 将图像拖放到div会将其从上一个div中删除

我做了这个

当我将图像div拖放到新div时，为什么它不在前一个div中

const boxes = document.querySelectorAll('.box');
const imageBox = document.querySelector('#draggableItem');
for (const box of boxes) {
    box.addEventListener('dragover', function (e) {
        e.preventDefault();
        this.className += ' onhover';

    })
    box.addEventListener('dragleave', function () {
        this.className = 'box';

    })
    box.addEventListener('drop', function (e) {
        this.className = 'box';
        this.append(imageBox);
    })
}

---

如果我理解您的需要，即拖放时可以重复图像，那么您需要克隆div-tag dom对象。由于js只看到对它的引用，当您简单地附加它时，这会导致它只是从一个地方移动到另一个地方，而不是复制

因此，不只是附加，而是按如下方式克隆节点（fiddle的js第15行）

请看这里：

---

更新的fiddle:

它不在上一个div中，因为

this.append

会将元素移动到新位置（因为同一个元素不能同时存在于DOM中的两个不同位置）。看见

this.append(imageBox.cloneNode(true));