拖拽图片至新div后原div中图片消失的原因解析

这事儿其实很好理解——DOM元素在页面里是唯一的实体，你用this.append(imageBox)的时候，并不是把这个图片div复制了一份放到目标容器里，而是直接把它从原来的位置“挪”过去了！就像你把桌上的杯子拿到另一个桌子上，原来的桌子自然就没杯子了。

为什么会这样？ #

浏览器里的每个DOM节点（比如你的#draggableItem）都是一个单独的对象，当你调用append()这类方法时，它的逻辑是：如果这个节点已经在DOM树里了，就先把它从原来的父节点中移除，再添加到新的父节点下。这就是为什么原div里的图片消失了——它被“搬家”了。

怎么解决？ #

如果你想让原容器里还保留这个图片div，同时在目标容器里新增一份，那你需要先复制这个元素，再把复制后的版本添加进去。可以用cloneNode(true)方法，true表示要复制元素的所有子节点和内容：

修改你的drop事件监听代码就行：

box.addEventListener('drop', function (e) {
  e.preventDefault(); // 别忘了加这个，不然有些浏览器默认行为会干扰drop事件
  this.className = 'box';
  // 复制原元素，包括内部所有内容
  const clonedImageBox = imageBox.cloneNode(true);
  // 给复制的元素重新设置draggable属性（如果需要继续拖拽新元素的话）
  clonedImageBox.setAttribute('draggable', 'true');
  this.append(clonedImageBox);
})

另外补充个小细节：你的dragover事件里也最好加上e.preventDefault()，不然部分浏览器可能不会正常触发drop事件哦。

如果你的需求本来就是移动元素（原容器不需要保留图片），那你的代码其实是符合预期的——这就是append()方法的默认行为~

内容的提问来源于stack exchange，提问作者user6086034