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

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

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

Advertisement

Answer