Javascript 拖放；拖放图像并保持其缩略图

我想做一个小的拖放式画廊。我有我的图像小画廊，我想把它们拖放到另一个特定的分区。目前，图像thumnail在拖放时丢失

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

这很有意义，因为我没有保存被拖动对象的任何引用。我有一个演示显示这种效果

在这之后，我想，如果我克隆了我正在拖动的对象并将其附加到图像库中，这会起作用，但它不会。它只在我第一次拖动时起作用，并且图像的位置会发生变化。第二次之后，它停止工作。第一次之后，数据不会像第一次那样返回drag1，而是返回图像。不知道为什么会这样。这是一本书

HTML就是这个

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>

  <div id="column">  
    <img id="drag1" src="http://collectionofpicture.com/wp-content/uploads/2013/11/high-resolution-landscape-wallpaper-69.jpg" draggable="true" class="test">
    <img id="drag2" src="http://collectionofpicture.com/wp-content/uploads/2013/11/3d-landscape-wallpaper-131.jpg" draggable="true" class="test">
    <img id="drag3" src="http://collectionofpicture.com/wp-content/uploads/2013/11/natural-landscape-wallpaper-91.jpg" draggable="true" class="test">
  </div> 

我试过买一个类似的，但没找到。谢谢。

我找到了解决办法。 我正在给克隆人分配坏的img

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var cpydata = document.getElementById(data);
    cpydataElement = cpydata.cloneNode(true);
    var columnId = document.getElementById("column");
    cpydataElement.removeAttribute("id"); 
    ev.target.appendChild(cpydataElement);
}

功能性

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var cpydata = document.getElementById(data);
    cpydataElement = cpydata.cloneNode(true);
    var columnId = document.getElementById("column");
    cpydataElement.removeAttribute("id"); 
    ev.target.appendChild(cpydataElement);
}