Question

我有一个ul元素，每个都有一个img。

<li class="c-hex-grid__item">
  <img class="c-hex-grid__media" src="/img/hex.png" alt="" id="new-hex_2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)"/>
</li>

我试图将img拖到另一个ul。

<ul style="height:600px; overflow:hidden; overflow-y:scroll;" ondrop="drop_list(event)" ondragover="allowDrop(event)" >
  <li draggable="true" id="19" ondragstart="drag(event)">
  </li>
.....

一旦我删除了img，我就不想删除img元素并像通常的Drag and Drop一样附加到新的ul。

相反，我需要保留img元素。然后我尝试更改图像的来源，以便图像发生变化。

function drop_list(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var image = document.getElementById(data).cloneNode(true);
    var img_name = 'img/hex.png';
    image.src = img_name;
}

项目正确拖动，图像var正在从：

正确设置

document.getElementById(data).cloneNode(true);

img_name正确查找图像文件。

但是，它没有将图像src设置为新文件。

我在Chrome调试中没有看到任何错误。

我想知道是不是因为HTML需要重新加载/构建？

Answer 1

我删除了cloneNode并且它可以正常工作！

function drop_list(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  image = document.getElementById(data);
  var img_name = 'img/hex.png';
  image.src = img_name;
}

拖放后设置图像src

1 个答案: