&引用；Node.appendChild的参数1不是对象；在编写拖放代码时；使用JavaScript删除_Javascript_Html_Css

&引用；Node.appendChild的参数1不是对象；在编写拖放代码时；使用JavaScript删除

javascript html css

&引用；Node.appendChild的参数1不是对象；在编写拖放代码时；使用JavaScript删除,javascript,html,css,Javascript,Html,Css,我正在用HTML和JavaScript编写一个拖放工具，但我遇到了一个问题。当我尝试删除我开始拖动的单元格时，出现以下错误：“TypeError:Node.appendChild的参数1不是对象。” 以下是HTML代码： <!DOCTYPE HTML> <html> <head> </head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

我正在用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>

还有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上的jsbin

目前，我正在尝试使用DnD将红细胞与紫色细胞进行切换（因此，目前只有“containermenu”div中的内容才重要）

我已经做了一些研究，但没有一个答案能真正帮助我

有人能告诉我怎么解决这个问题吗

谢谢。

您应该给可拖动元素一个

id

property.change

如果要为元素指定“cell-1”的id，则应更改

到

这行内容是什么

ev.dataTransfer.getData（“text/plain”）返回？在drop Function中，当您拖动或仅在某些拖放情况下，它总是发生在您身上吗？我可能错了，但对我来说，它会将拖动数据检索为指定类型的DOMString，此处为text/plain。我使用它是因为当代码完成时，单元格将包含文本。我在拖放目标中拖动的内容时会发生这种情况。现在我遇到了一个新问题。。。不知何故，可以在同一个位置丢弃多个单元格，而我希望每次只能丢弃一个单元格。有什么方法吗？你可以使用一个变量来存储放置目标是否包含单元格的状态。如果有，请不要附加单元格。对不起，最近几天我无法访问我的计算机。我试试这个。谢谢
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));
}