반응형
오류 : 'Node'에서 'appendChild'를 실행하지 못했습니다. 매개 변수 1이 'Node'유형이 아닙니다.
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>
사실 간단한 대답입니다.
함수가 div노드가 아닌 문자열을 반환 합니다. appendChild노드 만 추가 할 수 있습니다.
예를 들어, 문자열을 appendChild하려고하면 :
var z = '<p>test satu dua tiga</p>'; // is a string
document.body.appendChild(z);
위의 코드는 작동하지 않습니다. 작동하는 것은 :
var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);
이는 ID가 할당 된 요소를 실수로 드래그하지 않은 경우 (예 : 주변 요소를 드래그하는 경우) 발생할 수 있습니다. 이 경우 ID가 비어 있고 drag () 함수가 빈 값을 할당 한 다음 drop ()에 전달되고 실패합니다.
Try assigning the ids to all of your elements, including the tds, divs, or whatever is around your draggable element.
In my case, there was no string on which i was calling appendChild, the object i was passing on appendChild argument was wrong, it was an array and i had pass an element object, so i used divel.appendChild(childel[0]) instead of divel.appendChild(childel) and it worked. Hope it help someone.
반응형
'Programming' 카테고리의 다른 글
| Any, AnyVal, AnyRef, Object 간의 관계는 무엇이며 Java 코드에서 사용될 때 어떻게 매핑됩니까? (0) | 2020.08.13 |
|---|---|
| Android 애플리케이션에서 조각을 언제, 왜 사용해야합니까? (0) | 2020.08.13 |
| 문자, 코드 포인트, 글리프 및 자소의 차이점은 무엇입니까? (0) | 2020.08.13 |
| iPhone의 "홈 화면에 추가"에 대한 Javascript? (0) | 2020.08.13 |
| 원래 예외의 재발행에 대한 C ++ 예외 질문 (0) | 2020.08.13 |