I can drag and drop images onto other images when I shouldn't be able to

StackOverflow https://stackoverflow.com/questions/23411711

  •  13-07-2023
  •  | 
  •  

Frage

I have some pretty simple code that allows me to drag and drop images into different boxes. When the image is dropped, its parent node deletes it and the area where it was dropped onto appends it. That works fine. But if I drag and drop an image onto another image, then for some reason the same ondrop event fires, so the image ends up being deleted, but not re-inserted.

I've tried several things to fix this: adding a second drop function that does nothing and setting the ondrop property of the images to that, creating a "disallowdrop" function for the images that returns false, neither works. There should be no reason that the drop function is being called when something is dropped onto an image. I thought that elements don't accept dragged elements by default, anyway.

Here is the code I have:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .area {
                height:150px;
                width:400px;
                border:2px solid;
            }   
        </style>
    </head>
    <body onload="load()">

        <script type="text/javascript">

            function load() {
                var bottom = document.getElementById("bottom");
                bottom.appendChild(newDraggableImage("square.jpg", 1));
                bottom.appendChild(newDraggableImage("triangle.jpg", 2));
                bottom.appendChild(newDraggableImage("circle.jpg", 3));
            }

            function newDraggableImage(source, id) {
                var image = document.createElement('img');
                image.src = source;
                image.id = id;
                image.draggable = true;
                image.ondragstart = drag;
                return image;
            }

            function drop(event) {
                event.preventDefault();
                var image = document.getElementById(event.dataTransfer.getData('Text'));
                image.parentElement.removeChild(image);
                event.target.appendChild(image);
            }

            function allowDrop(event) {
                event.preventDefault();
            }

            function drag(event) {
                event.dataTransfer.setData('Text', event.target.id);
            }

        </script>
        <div id="top"    class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="bottom" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </body>
</html>
War es hilfreich?

Lösung

I'm not quite sure there is enough detail to understand what you're doing. My understanding is that you are dropping images over a div, and then the div contains that image. And you only want images to be dropped over the div itself, not over other images?

What you are then talking about is event bubbling. Event bubbling is when child elements inherit event handlers of their parents, which you don't want. In which case, you can use addEventListener and set the third value to false.

// watch the false!
document.getElementById("top").addEventListener("drop", drop, false);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top