0

我正在尝试将图像从 div 拖到 div 确保一次只有一个在 div 中。它在 Opera 上运行良好，但在 Chrome（和其他）中失败。它似乎可以工作，直到我从 javascript 更新元素，然后更新似乎没有在 Chrome 内部刷新。

我可以将任一图像拖到第三个正方形，但随后一切都被冻结了。我很想解决这个问题。

<!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>
4

1 回答 1

0 
squares[i].ondragover = 'allowDrop(event)';

在 Chrome 中分配null给.ondragover，因为它是一个字符串而不是一个函数。尝试将其替换为：

squares[i].ondragover = allowDrop; //<-- no quotes here
于 2012-07-06T22:01:08.380 回答