1

I am working on drag and drop in HTML5 but when I dorp my item I got Uncaught Error: NotFoundError: DOM Exception 8 Any one help me .Please check my code below

<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>

But I am dropping the button's I got Uncaught Error: NotFoundError: DOM Exception 8 Any one help me

4

1 回答 1

1

On Drag you are getting id of the element (buttons) and saving it in event data, but your mark -up doesn't have ids for button. So your appendChild fails as null(as document.getElementById returns null for empty id) is not a valid html node.

Try adding some id's to the button elements.

<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

Also noticed that you are duplicating the ids in divs, which is incorrect. ids must be unique in the document. You can remove the id from the first div.

于 2013-10-04T04:56:40.323 回答