Question

感谢您了解我的问题。此时我一直试图解决这个问题几天，阅读每一个可能的HTML5拖放参考，以及尽可能多地阅读stackflow，我只是无法弄清楚。

所以对我的问题：

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

我想要完成的任务：

通过克隆将图像从divLeft拖动到divRight（实际上会拖到divRight1, divRight2, divRight3, divRight4），以确保原始图像保留在原位以便再次使用。
将图像放到四个右边的一个图像中后，允许它成为一个独立的图像，可以独立地在四个div之间拖动，而无需克隆和交换其他图像的位置。因此，如果我在rightDiv1和rightDiv3中有图片，并将rightDiv3中的图片拖到rightDiv1，我希望他们只是交换位置。
如果图像从divLeft投放到＆＃39; divRight＆＃39;，请用新图片替换该位置中已存在的图片。

问题是什么：

目前我的克隆工作没有问题，但是如果我从左向右拖动新图像，它就不会替换右边的图像。
我也无法在右边拖动图像。

我希望这一切都有意义，而且我非常感谢所有帮助，因为我一直在绞尽脑汁。我知道我提供的代码是有限的，但我向你保证，我已经尝试了尽可能多的事情，我想回到一个良好的起点来寻求支持。

再次感谢大家。

Answer 1

我稍微修改了你的功能以更新节点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

克隆和替换HTML5拖放问题

1 个答案: