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

Question

I want to create page where I can move images between divs. I can move images over other divs and back. The problem is that if I move one image over another, the "another" image disappear. I am looking for some way to prevent this.

 <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

I expect that if I move image over another image, it will not move but stay in div where it is currently located.

Thank you for your time.

Answer 1

You need to clone the original element and create a new node, otherwise it will just moved over.

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