2

我在这里查看了几个看起来相似的问题，但我找不到答案。我正在尝试学习如何在纯 JavaScript 中进行“拖放”。我的测试代码适用于 Firefox 和 Chrome，但不适用于 IE 10。

我div在容器内拖动两个元素div，然后单击按钮检查id添加的两个子元素的属性值。

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

1

问题在于它替换document.write了当前文档，而 IE 对它的反应比其他文档更糟糕。

如果您想在页面上显示结果 - 指定一个占位符（例如另一个 DIV）并将输出添加到其 innerHTML。

于 2013-08-17T01:10:06.603 回答