HTML5 Drag and Drop issue with Cloning and replacing

Question

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.

So onto my problem:

Source: https://jsfiddle.net/dzsk7311/3/

<div id="divLeft">
  <div id="divLeft1">
    <img src="http://icons.iconarchive.com/icons/designcontest/casino/96/Banana-icon.png" draggable="true" ondragstart="drag(event)" id="drag1" width="50" height="50">
  </div>
  <div id="divLeft2">
    <img src="http://icons.iconarchive.com/icons/rokey/smooth/128/apple-icon.png" draggable="true" ondragstart="drag(event)" id="drag2" width="50" height="50">
  </div>
</div>

<div id="divRight">
  <div id="divRight1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="divRight2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="divRight3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="divRight4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

-

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

What I want to accomplish:

• Dragging images from divLeft to divRight (Which will actually be dragged to: divRight1, divRight2, divRight3, divRight4) through cloning to make sure the original image stays in place to be used again.
• 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 rightDiv1 and in rightDiv3, and I drag the image in rightDiv3 to rightDiv1, I want them to just swap places.
• If an image is being dropped from the divLeft to the 'divRight', replace an already existing image in the location with the new image.

What the problem is:

• 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.
• I also can't drag the images on the right among each other.

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.

Thank you all again.

Answer 1

I have modified your function slighlty to update node id

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var isLeft = 'drag1' == data || "drag2" == data;
  var nodeCopy = document.getElementById(data).cloneNode(true);
  nodeCopy.id = "img" + ev.target.id;
  if (!isLeft) {
    sourceNode = document.getElementById(data);
    sourceNode.parentNode.removeChild(sourceNode);
  }
  ev.target.appendChild(nodeCopy);
  ev.stopPropagation();
  return false;
}

See DEMO