Question

我正在使用HTML和JavaScript编写一个拖放工具，但我遇到了一个问题。当我尝试删除单元格时，我开始拖动，我得到以下错误：“TypeError：Node.appendChild的参数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中的内容暂时不重要。）

我已经做过一些研究，但没有一个答案可以帮助我。

有人可以解释一下如何解决这个问题吗？

谢谢。

Answer 1

您应该为可拖动元素提供id property.change。

如果您想要提供＆＃39; cell-1＆＃39;对于元素，你应该改变

<div class="grid-cell" draggable="true" ondragstart="drag(event)"></div>

到

<div class="grid-cell" draggable="true" ondragstart="drag(event)" id="cell-1"></div>

“Node.appendChild的参数1不是对象。”使用JavaScript编写Drag＆amp; Drop代码

1 个答案: