我正在用HTML和JavaScript编程一个拖放工具，但遇到了一个问题。当我试图放下我开始拖动的单元格时，我得到了以下错误："TypeError:Node.appendChild的Argument 1不是对象。">
这是HTML代码：
<!DOCTYPE HTML>
<html>
<head>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./css/main.css" rel="stylesheet" type="text/css">
<body>
<header>
<h1>
<ul id="menu">
<li><a>Maquette <br />du cursus</a></li>
<li><a>Séquences thématiques</a></li>
<li><a>Cours</a></li>
</ul>
</h1>
</header>
<div class="heading">
<h1 class="title">Maquette du nouveau cursus</h1>
</div>
<div class="containermenu">
<div id="scrollbar" id="style-1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="cell" draggable="true" ondragstart="drag(event)"></div>
<div class="cello" draggable="true" ondragstart="drag(event)"></div>
</div>
</div>
<div class="model-container">
<div class="grid-container" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="grid-row">
<div class="grid-cell" draggable="true" ondragstart="drag(event)"></div>
<div class="grid-cell" ></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
</div>
</div>
<p></p>
</div>
<footer>
<p>Footer</p>
</footer>
<script src="./script.js"></script>
</body>
</html>
CSS代码：
@import url(fonts/clear-sans.css);
[draggable=true]
html, body {
margin: 0;
padding: 0;
background: #FFFFFF;
color: #726880;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px; }
body {
margin: 0px 0; }
header {
padding : 10px 0;
background : #726880;
text-align : center;
font-weight : bold;
}
ul#menu
{
height: 50px ;
font-size:0.8em;
margin: 0 ;
list-style-type: none ;
text-align: center;
}
ul#menu li
{
list-style: none;
display: inline;
padding: 1px;
}
ul#menu li a
{
width: 255px ;
line-height: 25px ;
display: inline-block ;
text-align:center;
color: #FFFFFF;
}
footer {
font-weight : bold;
color: #FFFFFF;
background : #726880;
text-align : center;
padding : 10px;
}
.heading:after {
content: "";
display: block;
clear: both; }
h1.title {
font-size: 25px;
font-weight: bold;
text-align : center;
margin-top: 10px;
}
p {
margin-top: 0;
margin-bottom: 10px;
line-height: 1.65; }
a {
color: #776e65;
font-weight: bold;
text-decoration: underline;
cursor: pointer; }
hr {
border: none;
border-bottom: 1px solid #d8d4d0;
margin-top: 20px;
margin-bottom: 30px; }
.container {
width: 500px;
margin: 0 ; }
.containermenu {
cursor: default;
background: #726880;
border-radius: 6px;
width: 264px;
height: 425px;
box-sizing: border-box;
float:left;
margin-left: 80px;
}
#scrollbar
{
cursor: default;
padding: 15px;
background: #FFFFFF;
border-radius: 6px;
width: 224px;
height: 340px;
box-sizing: border-box;
margin-top: 60px;
margin-left: 23px;
margin-bottom: 60px;
overflow-y: auto;
margin-bottom: 25px;
}
.model-container {
padding: 15px;
margin-left: 400px;
cursor: default;
background: #726880;
border-radius: 6px;
width: 800px;
height: 425px;
box-sizing: border-box;
}
.grid-container-menu {
position: relative;
z-index: 1; }
.grid-container {
position: absolute;
z-index: 1; }
.grid-row {
margin-bottom: 15px; }
.grid-row:last-child {
margin-bottom: 15px; }
.grid-row:after {
content: "";
display: block;
clear: both; }
.grid-cell {
width: 181.25px;
height: 106.25px;
margin-right: 15px;
float: left;
border-radius: 3px;
background: #FFF8DC; }
.grid-cell:last-child {
margin-right: 0; }
.cell {
cursor:pointer;
width: 181.25px;
height: 106.25px;
margin-right: 15px;
margin-bottom: 15px;
float: left;
border-radius: 3px;
background: #841D3B; }
.cell:last-child {
margin-right: 0; }
.cell:focus{
outline:none;
}
.cello {
cursor:pointer;
width: 181.25px;
height: 106.25px;
margin-right: 15px;
margin-bottom: 15px;
float: left;
border-radius: 3px;
background: #241A3B; }
.cell:last-child {
margin-right: 0; }
.cell:focus{
outline:none;
}
还有JavaScript：
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
console.log(ev);
ev.dataTransfer.setData("text/plain", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text/plain");
console.log(data);
ev.target.appendChild(document.getElementById(data));
}
以下是输出和带有JS Bin:的控制台
jsbin.com 上的JS Bin
目前，我只是试图使用DnD将红色单元格与紫色单元格进行切换(所以目前只有"containermenu"div中的内容才重要)。
我已经做了一些研究，但没有一个答案能真正帮助我
有人能给我解释一下如何解决这个问题吗？
谢谢。
您应该给可拖动元素一个id属性。change.
如果你想给元素一个id"cell-1"，你应该更改
<div class="grid-cell" draggable="true" ondragstart="drag(event)"></div>
至
<div class="grid-cell" draggable="true" ondragstart="drag(event)" id="cell-1"></div>