Home/ Questions/Q 8196101
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T05:22:09+00:00

I’m trying to drag images from div to div making sure that only one

  • 0

I’m trying to drag images from div to div making sure that only one is in a div at a time. It works great on Opera but fails in Chrome (and others). It appears to work until I update elements from javascript and then the updates don’t appear to be refreshed internally in Chrome.

I can drag either of the images to the third square but then everything is frozen. I’d love ideas to work around this.

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css"> 
    .outer {
        width: 150px;
        height: 40px;
    }

    .square {
        float: left;
        width: 32px;
        height: 32px;
        margin: 1px;
        padding: 0px;
        border: 1px solid #aaaaaa;
    }
    </style>

    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));

            lock();
        }

        function lock() {
            var squares = document.getElementsByClassName("square");

            for (var i = 0; i < squares.length; i++) {
                if (squares[i].children.length == 0) {
                    squares[i].ondragover = 'allowDrop(event)';
                }
                else {
                    squares[i].ondragover = '';
                }
            }
        }

        function init() {
            document.write("<div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'><img src='bb.png' alt='bb' id=1 class='movable' draggable=true ondragstart='drag(event)'></div>");

            lock();
        }
    </script>
</head>

<body>
    <script type="text/javascript">
        init();
    </script>

    <div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'> 
    <img src="aa.png" alt='aa' id=2 class='movable' draggable=true ondragstart="drag(event)">
    </div>
    <div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'> 
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    squares[i].ondragover = 'allowDrop(event)';

    Assigns null to .ondragover in Chrome, since it’s a string and not a function. Try replacing it with:

    squares[i].ondragover = allowDrop; //<-- no quotes here
    • 0