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.

score 0 · Accepted Answer · answered Sep 12 '19 at 10:29

0

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

answered Sep 12 '19 at 10:29

niQu

331
1
9

I tried code provided. It replicated images, but not really moved them. The image I tried to drag&drop stayed where it was but replicated to another div. What I would like to do is to be able move images between divs, but if the div I want to move image into is occupied by another image, it will not move but stay in the div he is occupying now. There should be exactly 4 images on the screen to move, not more, not less. – Robert Veselý Sep 12 '19 at 11:04

score 0 · Answer 2 · answered Feb 04 '21 at 18:10

This is another example of a solution for your code. Here the images don't disappear and we don't need to create clones for the image:

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

2 Answers2