Question

我正在进行HTML5中的拖放操作但是当我执行我的项目时我得到了未捕获错误：NotFoundError：DOM异常8任何人都帮助我。请检查下面的代码

<html>
<head>
<script>

 function drag(ev)
  {
console.log("call drag event method..");
 ev.dataTransfer.setData("Text",ev.target.id);
 }

function drop(ev)
{
console.log("call drop event method..");
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
}
 function allowDrop(ev)
{
 console.log("call allow event method..");
 ev.preventDefault();
}   
</script>
<body>
 <div id="selectedItems" style="overflow-y:scroll">
 <button draggable="true" ondragstart="drag(event)">FirstName</button>        
 <button draggable="true" ondragstart="drag(event)" >FirstName</button>
 <button draggable="true" ondragstart="drag(event)" >FirstName</button>
</div>
     <div id="selectedItems"  ondrop="drop(event)" ondragover="allowDrop(event)">


              </div>
</body>
</html>

但我正在删除按钮我得到了未捕获错误：NotFoundError：DOM异常8任何人帮助我

Answer 1

在拖动时，您将获得元素（按钮）的id并将其保存在事件数据中，但您的标记没有按钮的ID。所以你的appendChild失败为null（因为document.getElementById为空id返回null）不是一个有效的html节点。

尝试在按钮元素中添加一些id。

<button id="11"  draggable="true" ondragstart="drag(event)">FirstName</button>
<button id="21" draggable="true" ondragstart="drag(event)">FirstName</button>
<button id="31" draggable="true" ondragstart="drag(event)">FirstName</button>

<强> Demo

另请注意，您正在复制div中的ID，这是不正确的。 ID必须在文档中是唯一的。您可以从第一个div中删除id。

未捕获错误：NotFoundError：DOM异常8？

1 个答案: