当另一个图像放在上面时如何防止图像消失

Question

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

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

CodePen here

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

感谢您的宝贵时间。

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

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

当另一个图像放在上面时如何防止图像消失

How to prevent image disappear when another image is dropped on it

javascript

drag-and-drop

draggable

drag