HTML5 克隆和替换的拖放问题

HTML5 Drag and Drop issue with Cloning and replacing

感谢您查看我的问题。在这一点上,我已经尝试了几天来解决这个问题,阅读了所有可能的 HTML5 拖放参考资料,并尽可能多地阅读了 stackflow 上的内容,但我就是想不通。

所以我的问题是:

来源: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;
}

我想完成的事情:

问题是什么:

我希望这一切都是有道理的,我非常感谢所有的帮助,因为我一直在绞尽脑汁。我知道我提供的代码是有限的,但我向你保证,我已经尝试了尽可能多的事情,只是想回到一个好的起点以获得支持。

再次感谢大家。

我已经稍微修改了你的函数来更新节点 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;
}

DEMO