Uncaught TypeError：无法执行'节点'上的'appendChild'：参数1的types不是'Node'.draganddrop.html：20 dropdraganddrop.html：26
我想拖放一个图像的div。 图像不会被拖到div上，并给出以下错误
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop 码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creativity Dashboard</title> <!-- Required CSS --> <link href="css/movingboxes.css" rel="stylesheet"> <link href="css/compare.css" rel="stylesheet"> <!--[if lt IE 9]> <link href="css/movingboxes-ie.css" rel="stylesheet" media="screen"> <![endif]--> <!-- Required script --> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="js/jquery.movingboxes.js"></script> <!-- Demo only --> <link href="demo/demo.css" rel="stylesheet"> <script src="demo/demo.js"></script> <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> <style> /* Overall & panel width defined using css in MovingBoxes version 2.2.2+ */ #slider-one { width: 1003px; } #slider-one>li { width: 150px; } </style> </head> <body> <div class="wrapper"> <!-- Slider #1 --> <ul id="slider-one"> <li><img id="drag1" src="demo/1.jpg" draggable="true" ondragstart="drag(event)" alt="picture"></li> <li><img id="drag2" src="demo/2.jpg" draggable="true" ondragstart="drag(event)" alt="picture"></li> <li><img id="drag3" src="demo/3.jpg" draggable="true" ondragstart="drag(event)" alt="picture"></li> <li><img id="drag5" src="demo/4.jpg" draggable="true" ondragstart="drag(event)" alt="picture"></li> <li><img id="drag6" src="demo/5.jpg" draggable="true" ondragstart="drag(event)" alt="picture"></li> <li><img id="drag7" src="demo/6.jpg" draggable="true" ondragstart="drag(event)" alt="picture" id="astronaut"></li> <li><img id="drag8" src="demo/7.jpg" draggable="true" ondragstart="drag(event)" alt="picture"></li> </ul> <!-- end Slider #1 --> <div id="dragAnddrop" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 12em; height: 12em"> </div> </div> <div> <div class="left"> <img id="drag" draggable="true" ondragstart="drag(event)" src="images/startingImage.jpg" style="width: 12em;" alt="picture"> </div> <div class="middle "> <img id="image3" src="images/startingImage.jpg" class="image-size" alt="picture" draggable="true" ondragstart="drag(event)"> <img src="images/harvest.jpg" class="image-size" alt="picture"> </div> <div class="right"> <img src="images/startingImage.jpg" style="width: 12em;" alt="picture"> </div> </div> </body> </html>
只有一个简单的问题。
其实你的函数是返回string而不是div节点，所以例如你尝试appendChildstring
var z = '<p>test satu dua tiga</p>'; document.body.appendChild(z);
上面的代码将永远不会工作，所以这是很好的把这样的：
var z = document.createElement('p'); z.innerHTML = 'test satu dua tiga'; document.body.appendChild(z);
如果您不小心拖动了已分配了标识的元素（例如拖动周围的元素），就会发生这种情况。 在这种情况下，ID是空的，函数drag（）分配一个空值，然后传递给drop（）并在那里失败。
尝试将ID分配给所有元素，包括tds，div或可拖动元素周围的任何元素。
代替
ev.target.appendChild(document.getElementById(data));
尝试
ev.target.innerHTML = document.getElementById(data);
