title: HTML5 Drag and Drop issue with Cloning and replacing
body: <p>Thanks for taking a look into my issue. I have been trying to figure this out for days at this point, reading every possible HTML5 Drag and Drop reference there is as well as reading through as much as I could here on stackflow and I just can't figure out.</p>
  
  <p>So onto my problem:</p>
  
  <p>Source: <a href="https://jsfiddle.net/dzsk7311/3/" rel="nofollow">https://jsfiddle.net/dzsk7311/3/</a></p>
  
  <pre><code>&lt;div id="divLeft"&gt;
    &lt;div id="divLeft1"&gt;
      &lt;img src="http://icons.iconarchive.com/icons/designcontest/casino/96/Banana-icon.png" draggable="true" ondragstart="drag(event)" id="drag1" width="50" height="50"&gt;
    &lt;/div&gt;
    &lt;div id="divLeft2"&gt;
      &lt;img src="http://icons.iconarchive.com/icons/rokey/smooth/128/apple-icon.png" draggable="true" ondragstart="drag(event)" id="drag2" width="50" height="50"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="divRight"&gt;
    &lt;div id="divRight1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
    &lt;div id="divRight2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
    &lt;div id="divRight3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
    &lt;div id="divRight4" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>function allowDrop(ev) {
    ev.preventDefault();
  }
  
  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
  
  function drop(ev) {
     ev.preventDefault();
     var data = ev.dataTransfer.getData("text");
     var nodeCopy = document.getElementById(data).cloneNode(true);
     ev.target.appendChild(nodeCopy);
     ev.stopPropagation();
     return false;
  }
  </code></pre>
  
  <p><strong>What I want to accomplish:</strong></p>
  
  <ul>
  <li>Dragging images from <code>divLeft</code> to <code>divRight</code> (Which will actually be dragged to: <code>divRight1, divRight2, divRight3, divRight4</code>) through cloning to make sure the original image stays in place to be used again.</li>
  <li>Once image has been dropped to one of the four right div's, allow it to be a standalone image that can be dragged between the four div's independently without cloning and swapping places with the other image. So if I have an image in <code>rightDiv1</code> and in <code>rightDiv3</code>, and I drag the image in <code>rightDiv3</code> to <code>rightDiv1</code>, I want them to just swap places.</li>
  <li>If an image is being dropped from the <code>divLeft</code> to the 'divRight', replace an already existing image in the location with the new image.</li>
  </ul>
  
  <p><strong>What the problem is:</strong></p>
  
  <ul>
  <li>Currently I have the cloning working with no issue, but if I drag a new image from the left to the right, it doesn't replace the image on the right.</li>
  <li>I also can't drag the images on the right among each other.</li>
  </ul>
  
  <p>I hope this all makes sense, and I really appreciate any and all help since I have been racking my brain. I know that the code I have provided is limited, but I assure you, I have tried as many things as I possibly can think of and just wanted to go back to a good starting point for support.</p>
  
  <p>Thank you all again.</p>