2

ここで似ているように見えるいくつかの質問を見てきましたが、答えが見つかりません。純粋なJavaScriptで「ドラッグアンドドロップ」を行う方法を学ぼうとしています。テスト コードは Firefox と Chrome では機能しますが、IE 10 では機能しません。

divコンテナー内に 2 つの要素をドラッグdivし、ボタンをクリックして、id追加された 2 つの子それぞれの属性の値を確認しています。

HTML

<!DOCTYPE HTML>
<html>

<head>
    <script src="check.js"></script>
    <style type="text/css">
        #div1 {
            width:350px;
            height:120px;
            padding:10px;
            margin-bottom:15px;
            border:1px solid #aaaaaa;
        }
        .box {
            display:inline;
            width:100px;
            height:30px;
            padding:10px;
            border:1px solid #aaaaaa;
        }
    </style>
    <script>
        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));
        }
    </script>
</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div class="box" id="foo" draggable="true" ondragstart="drag(event)">foo </div>
<div class="box" id="bar" draggable="true" ondragstart="drag(event)">bar </div>
<input type="button" name="check" id="check" value="Check">
</body>
</html>

Javascript

window.onload = function () {

    var button = document.getElementById('check');
    button.addEventListener("click", handler, false);

    function handler() {
        var d = document.getElementById("div1");
        var children = d.childNodes;
        //var children = d.children;  tried both children and childNode : works in FF/Chrome not IE
        var i;
        document.write(children.length + "<br>");
        document.write(children[0] + "<br>");
        document.write(children[1] + "<br>");
        for (i = 0; i < children.length; i++) {
            document.write(children[i].id);
        }
    }
}

Firefox と Chrome での出力は、私が期待したものです。

2
[object HTMLDivElement]
[object HTMLDivElement]
foobar

IE での出力: 子ノードは未定義です:

2
undefined
undefined

テキストノードが子を持つことができないことは知っていますが、divここに要素を追加しているように見えるので、何が起こっているのかわかりません。.childrenとメソッドを調べたところ、.childNodeどちらも IE 9 からサポートされるはずで、IE 10 でテストしています。おそらくappendChildメソッドと関係がありますか?

4

1 に答える 1