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

Question

我想创建可以在 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));    }我希望如果我将图像移动到另一个图像上，它不会移动而是留在当前所在的 div 中。感谢您的时间。