javascript - Jquery拖放图像但原始/源图像丢失

Question

图像托盘中的图像应该位于托盘中，即使它被拖放到第一个/第二个 div 中。但是一旦我将其放入第一个/第二个 div 中，它就会消失。我希望图像即使被拖动也出现在托盘中。有人可以帮忙吗？

Firtst input div<div class="div1"  ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

second input div<div class="div1"  ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Image tray<img id="drag1" src="https://www.google.com/images/srpr/logo3w.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

Javascript

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
 ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

请找到我的作品@JSFIDDLE

Answer 1

您可以克隆该元素，请参阅 https://jsfiddle.net/bgwzvoj1/1/

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    ev.target.appendChild(document.getElementById(data).cloneNode());
}

cloneNode