当我将一张图片拖放到另一张图片上时，为什么它会消失？

Question

我正在向多个图像添加一个拖动事件，这样可以将它们从一个块拖到另一个块并返回。代码运行良好，除了一个小故障。每当我拖动一个图像并将其放在任何其他图像之上时，它就会消失。有人可以解释为什么会这样，我怎样才能阻止它发生？我在这里包括代码。这也是它的 jsfiddle - https://jsfiddle.net/Ljmqyz1h/1/

<html>
<head>
    <style>
        div {
            float: left;
            width: 500px;
            height: 500px;
            padding: 10px;
            border: 1px solid black;
        }
        #div2 {
            margin-left: 50px;
        }
        img {
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        function allowDrop(event) {
            event.preventDefault();
        }
        function drag(event, id) {
            var img1 = document.getElementById(id);
            event.dataTransfer.setData("osaicon", img1.id);
            img1.style.opacity = 0;
        }
        function drop(event) {
            var data = event.dataTransfer.getData("osaicon");
            event.target.appendChild(document.getElementById(data));
        }
        function show(id) {
            var img1 = document.getElementById(id);
            img1.style.opacity = 1;
        }
    </script>
</head>
<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img id="logo" src="osahub-icon.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)">
        <img id="blue" src="Red_ball.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)">
        <img id="red" src="Blue_ball.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)">
        <img id="button" src="button.gif" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)">
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
</body>

Answer 1

在您的代码中，您只需要测试将放置图像的目标是否不是图像。

if ( event.target.nodeName !== "IMG" ) {
    event.target.appendChild(document.getElementById(data));
}

演示：https://jsfiddle.net/Ljmqyz1h/3/

当我将一张图片拖放到另一张图片上时，为什么它会消失？

When I Drag and Drop one image over another, why does it disappear?

html

javascript

drag-and-drop