Hello & TIA ,
Need help , Having problem with Drag n Drop ?
My code seems quite simple , but I have been hung up for days :
The first DnD doesnt Drop : 'div id="itemContainer" ' , getting Errors:
The 2nd DnD works fine .
Need help , Having problem with Drag n Drop ?
My code seems quite simple , but I have been hung up for days :
The first DnD doesnt Drop : 'div id="itemContainer" ' , getting Errors:
Code:
W3schools-Drag-and-Drop-and-Back.html:68 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at drop (W3schools-Drag-and-Drop-and-Back.html:68:13)
at HTMLDivElement.ondrop (W3schools-Drag-and-Drop-and-Back.html:51:121)The 2nd DnD works fine .
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.item {
display: inline-block;
border-radius: 50%;
touch-action: none;
user-select: none;
counter-increment: itemCount;
content: 'count' + itemCount;
width: 32px;
height: 32px;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:28px;
z-index: 8;
}
</style>
</head>
<body>
<h2>Drag and Drop</h2>
<br>
<div id="itemContainer" id="dragItems" ondrop="drop(event)" ondragover="allowDrop(event)" class="POS" style=" width:100%; border: thick solid pink;">
<br> <div class="item" class="flatOne" id="flatOne" draggable="true" style=" background-color: yellow;" >b1</div>
<br> <div class="item" class="one" draggable="true" ondragstart="drag(event)" style=" background-color: #FF0004;" > 1</div>
<br> <div class="item" class="sharpOne" draggable="true" ondragstart="drag(event)" style=" background-color: yellow;" >♯1</div>
<br> <div class="item" class="naturalOne" draggable="true" ondragstart="drag(event)" style=" background-color: yellow;" >♮1</div>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="RedCircle.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br><br><br><br>
<br>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style=" border: thick solid blue; width:100%; height: 200px;">
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
// console.log("function allowDrop(ev)")
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
console.log("function function drag(ev)")
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
console.log("function drop(ev)")
}
</script>
</body>
</html>