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/

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

1 个答案: