0

一度に 1 つだけが div にあることを確認して、div から div に画像をドラッグしようとしています。Opera では問題なく動作しますが、Chrome (およびその他) では失敗します。javascript から要素を更新するまでは機能しているように見えますが、更新は Chrome で内部的に更新されていないようです。

いずれかの画像を 3 番目の正方形にドラッグできますが、すべてがフリーズします。これを回避するためのアイデアが欲しいです。

<!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 に答える