拖放后设置图像src

Question

I have a ul of li elements each with an 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>

I'm trying to drag the img to another 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>
.....

Once I've dropped the img, I don't want to remove the img element and append to the new ul like the usual Drag and Drop.

Instead I need the img element to remain. I then try and change the source of the image, so that the image changes.

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

The item is dragging correctly, and the image var is being correctly set from:

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

And the img_name is correctly finding the image file.

However, it's not setting the image src to the new file.

I'm not seeing any errors in chrome debugging.

I wonder if it's because the HTML needs reloading/building?

Answer 1

I removed the cloneNode and it works!

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