Question

我正在尝试制作一个小型拖放画廊。我有我的小图片库，我想拖动他们然后放在另一个特定的div。目前，图像thumnail在下降时丢失。

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

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

在此之后，我想，如果我克隆对象，我拖动并将其附加到图库，这将有效，但事实并非如此。它仅在我第一次拖动时起作用，并且图像位置发生变化。第二次后它停止工作。第一次数据没有像第一次那样返回 drag1 ，但是返回了我的图像。不知道为什么会这样做。这是DEMO。

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");
    cpydata.removeAttribute("id"); 
    ev.target.appendChild(cpydata);
    columnId.innerHTML = columnId.innerHTML + cpydataElement.outerHTML ; 
}

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>

我试图获得类似的question，但还没有找到它。感谢。

Answer 1

我找到了解决方案。我正在分配克隆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);
}

功能Demo

拖动;删除图像并保持其缩略图

1 个答案: