set image src after drag and drop

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?

it looks like you made a genuine effort to debug this on your own, so thank you, but to me, your question is unclear... I read the first 2 sentances 3 times and i still don't understand what you were trying to say. caan you clarify that please? — I wrestled a bear once.

Simon Edge Simon Edge · Accepted Answer · 2018-02-13T14:14:08

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

set image src after drag and drop

1 Answers