title: set image src after drag and drop
body: <p>I have a ul of li elements each with an img.</p>
  
  <pre><code>&lt;li class="c-hex-grid__item"&gt;
    &lt;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)"/&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I'm trying to drag the img to another ul.</p>
  
  <pre><code>&lt;ul style="height:600px; overflow:hidden; overflow-y:scroll;" ondrop="drop_list(event)" ondragover="allowDrop(event)" &gt;
    &lt;li draggable="true" id="19" ondragstart="drag(event)"&gt;
    &lt;/li&gt;
  .....
  </code></pre>
  
  <p>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.</p>
  
  <p>Instead I need the img element to remain. I then try and change the source of the image, so that the image changes.</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The item is dragging correctly, and the image var is being correctly set from:</p>
  
  <pre><code>document.getElementById(data).cloneNode(true);
  </code></pre>
  
  <p>And the img_name is correctly finding the image file.</p>
  
  <p>However, it's not setting the image src to the new file.</p>
  
  <p>I'm not seeing any errors in chrome debugging.</p>
  
  <p>I wonder if it's because the HTML needs reloading/building?</p>