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);