我正在 HTML5 中进行拖放操作,但是当我 dorp 我的项目时,我遇到了 Uncaught Error: NotFoundError: DOM Exception 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>
但是我正在删除按钮,我遇到了 Uncaught Error :NotFoundError:DOM 异常 8 任何人都可以帮助我
最佳答案
在拖动时,您将获取元素(按钮)的 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。
关于javascript - Uncaught Error : NotFoundError: DOM Exception 8?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19173376/