HTML5 drag and drop not working

Question

I am using an HTML5 drag and drop script and it doesn't work. When I use the error console in safari, it says :

NOT_FOUND_ERR: DOM Exception 8: An attempt was made to reference a
Node in a context where it does not exist.

I have no idea what that means. Here is my example: http://thomaswd.com/maze . Try dragging the mouse to the indicated square. It's supposed to make Algernon stay at that box. Thanks!

Also, is it possible to stop the user from dragging the mouse through the walls? Thanks!!

Answer 1

Collision for the walls
http://www.html5rocks.com/en/tutorials/canvas/notearsgame/

as far as the mouse and error goes, I don't see either. However the error listed above is obvs. a issue with your source/script. I looked through it, but there is nothing there, did you remove the JS before posting the example?\\

Edit

ev.target.appendChild(document.getElementById(data)); this line. "Error: An attempt was made to reference a Node in a context where it does not exist. at drop (thomaswd.com/Maze/:18:15) at HTMLDivElement.ondrop (thomaswd.com/Maze/:50:225)"

The doms (getelementbyid) is looking for the ID "mouse" and can't find it. set the image ID = "mouse"

I used chromes developer tools and edit this line locally and it worked. and the mouse dropped without an issue.

<img src="rat.png" id="mouse" width="60px" ondragstart="drag(event)" style="cursor:move;" draggable="true">

Answer 2

This happens because you did not set id of your mouse. add this to your mouse image

id="mouse"

Second, for every single TD, you need to make it droppable by setting these attributes.

ondrop="drop(event)" ondragover="allowDrop(event)"