javascript - 拖放后设置图像 src

Question

我有一个由 li 元素组成的 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 元素并附加到新的 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;
}

该项目正在正确拖动，并且图像变量正在正确设置:

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

并且 img_name 正确地找到了图像文件。

但是，它不会将图像 src 设置为新文件。

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

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

Answer 1

我删除了克隆节点并且它可以工作!

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;
}