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

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 中。

感谢您的时间。