I'm working on a group project for my software engineering course. To make a long story short I'm trying to use the drag and drop HTML API, but I'm not having any luck. Below is the html for the page I'm trying to implement the drag and drop on. There are multiple files within the project as this is a website, if there isn't enough information I will upload the other files at the request. In the HTML file below all I'm trying to do is drop hello
<p>
into the div1
<div>
.
<!DOCTYPE html>
<html>
<head>
<title>Fundamentals of SE (Scratchat)</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/main.css">
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
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="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="aboutus.html">About us</a>
<a href="features.html">Features</a>
<a href="#">Build</a>
<a href="tutorial.html">Tutorial</a>
<a href="https://scratch.mit.edu/about">About Scratch</a>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer; color: #white" onclick="openNav()">☰</span>
</div>
<div class="div1" style="height: 100px; width: 100%; border: solid 2px black" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<!--
<div class="container">
<div class="jumbotron" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="scratchWindow" style="padding-top: 200px; padding-bottom: 200px;">
</div>
</div>
</div>
-->
<div class="question" draggable="true" ondragstart="drag(event)">
<p>
Hello
<!--
<label>What Question Do You Want Your Bot To Ask?</label><br>
<textarea
id = "Question"
rows = 3
cols = 20>Your Question Here</textarea>
-->
</p>
</div>
</body>
</html>
HERE IS THE CSS FILE USED GLOBALLY ACROSS THE WEBSITE:
.jumbotron {
background-image: url("../res/robot-customer-service.png");
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {
max-width: 100%;
max-height: 100%;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #1974fc;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #36bac3;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
body {
background: url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2015/04/colortheory.jpg");
}
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at drop (scratchat.html:30) at HTMLDivElement.ondrop (scratchat.html:50)
Node
instead ofdocument
? If that is the case is there a similar function forNode
that corresponds todocument.getElementById()
? Wouldelement.getElementsByClassName()
be what I'm looking for?getElementsByClassName()
will return a group of elements, a node list so you will have to select the one you want to target. Also your draggable div and the one use to get the drop don't haveID's
so you are trying to target an element with no ID at this pointev.target.appendChild(document.getElementById(data));
Unless I am reading it wrong. I would recommend youconsole.log();
things to ensure you are targeting and the variables contain/return the correct data.