拖放后设置图像src答案

【问题标题】：set image src after drag and drop拖放后设置图像src
【发布时间】：2018-02-13 12:53:45
【问题描述】：

我有 ul 的 li 元素，每个元素都有一个 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 需要重新加载/构建？

【问题讨论】：

请添加您的代码的一些工作示例
看起来你真的很努力自己调试这个，所以谢谢你，但对我来说，你的问题不清楚......我读了前 2 句 3 遍，我仍然不知道'不明白你想说什么。你能澄清一下吗？
我已经更新了我的解释

标签： javascript html image drag-and-drop src

【解决方案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;
}

【讨论】：