时间戳

首页 > 解决方案 > 将图像拖放到 div 会将其从前一个 div 中删除

javascript - 将图像拖放到 div 会将其从前一个 div 中删除

问题描述

我做了这个

https://jsfiddle.net/a4376mr8/

当我将图像 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);
    })
}

标签： javascript

解决方案

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

因此，不仅仅是附加，而是克隆节点，如下所示（小提琴 js 的第 15 行）。

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

见这里：https ://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

更新小提琴：https ://jsfiddle.net/a4376mr8/1/

推荐阅读