当另一个图像落在其上时如何防止图像消失答案

【问题标题】：How to prevent image disappear when another image is dropped on it当另一个图像落在其上时如何防止图像消失
【发布时间】：2019-09-12 10:22:27
【问题描述】：

我想创建可以在 div 之间移动图像的页面。我可以将图像移动到其他 div 上并返回。问题是，如果我将一个图像移到另一个图像上，“另一个”图像就会消失。我正在寻找一些方法来防止这种情况发生。

 <div id="wrapper">
     <div id="cards_wrapper">
            <div id="cards_left">
                <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img src="https://picsum.photos/150" draggable="true" ondragstart="drag(event)" id="dragImg1">
                </div>
                <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img src="https://picsum.photos/150/150"  draggable="true" ondragstart="drag(event)" id="dragImg2">
                </div>
                <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img src="https://picsum.photos/id/237/150"  draggable="true" ondragstart="drag(event)" id="dragImg3">
                </div>
                <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img src="https://picsum.photos/150?grayscale"  draggable="true" ondragstart="drag(event)" id="dragImg4">
                </div>
            </div>
            <div id="cards_right">
                <div id="right_tiger" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                <div id="right_bear" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                <div id="right_butter" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                <div id="right_croc" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
    </div>
</div>

    function allowDrop(event)
    {
        event.preventDefault();
    }
    function drag(event)
    {
        event.dataTransfer.setData("text", event.target.id);
    }

    function drop(event)
    {
        event.preventDefault();
        var imgData = event.dataTransfer.getData("text");
        event.target.appendChild(document.getElementById(imgData));
    }

代码笔here

我希望如果我将图像移动到另一个图像上，它不会移动，而是留在它当前所在的 div 中。

感谢您的宝贵时间。

【问题讨论】：

标签： javascript drag-and-drop draggable drag

【解决方案1】：

你需要克隆原始元素并创建一个新节点，否则它将只是移动。

function allowDrop(event)
{
  event.preventDefault();
}
function drag(event)
{
  event.dataTransfer.setData("text", event.target.id);
}

function drop(event)
{
  event.preventDefault();
  var imgData = event.dataTransfer.getData("text");
  var newNode = document.getElementById(imgData).cloneNode(true);

  clearChildren(event.target);
  event.target.appendChild(newNode);
}

function clearChildren(el) {
  while (el.firstChild) {
    el.removeChild(el.firstChild);
  }  
}

【讨论】：

我尝试了提供的代码。它复制了图像，但并没有真正移动它们。我试图拖放的图像留在原处，但复制到另一个 div。我想做的是能够在div之间移动图像，但是如果我要移动图像的div被另一个图像占据，它不会移动而是留在他现在占据的div中。屏幕上应该正好有 4 个图像可以移动，不能多也不能少。

【解决方案2】：

这是您的代码解决方案的另一个示例。这里的图像不会消失，我们也不需要为图像创建克隆：

function allowDrop(event)
{
  event.preventDefault();
}
function drag(event)
{
  event.dataTransfer.setData("text", event.target.id);
}

function drop(event)
{
  if (ev.target.tagName != "IMG") {
    event.preventDefault();
    var imgData = event.dataTransfer.getData("text");
    var newNode = document.getElementById(imgData);
    event.target.appendChild(newNode);
  }
}

【讨论】：