HTML5拖放不起作用答案

【问题标题】：HTML5 drag and drop not workingHTML5拖放不起作用
【发布时间】：2013-02-13 03:18:43
【问题描述】：

我正在使用 HTML5 拖放脚本，但它不起作用。当我在 safari 中使用错误控制台时，它说：

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

我不知道那是什么意思。这是我的示例：http://thomaswd.com/maze。尝试将鼠标拖动到指示的方块。它应该让阿尔杰农留在那个盒子里。谢谢！

另外，是否可以阻止用户拖动鼠标穿过墙壁？谢谢！！

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

墙壁碰撞
http://www.html5rocks.com/en/tutorials/canvas/notearsgame/

就鼠标和错误而言，我也看不到。但是上面列出的错误是 obvs。您的源/脚本有问题。我看了看，里面什么都没有，你发例子之前是不是把JS删掉了？\

编辑

ev.target.appendChild(document.getElementById(data));这条线。 “错误：尝试在不存在的上下文中引用节点。在 HTMLDivElement.ondrop (thomaswd.com/Maze/:50:225) 的 drop (thomaswd.com/Maze/:18:15) "

doms (getelementbyid) 正在寻找 ID“mouse”，但找不到。设置图片 ID = "鼠标"

我使用了 chromes 开发者工具并在本地编辑了这一行，它工作正常。并且鼠标没有问题地掉落。

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

【讨论】：

对不起，我忘记上传更新的文件了，现在你可以看到了
thomaswd.com/Maze/rat.png - 没有图片。 404 未找到。先解决这个问题，然后测试并告诉我。另外请确保它可以正常工作，因为我目前还不能复制错误。
ev.target.appendChild(document.getElementById(data));这条线。 “错误：试图在不存在的上下文中引用节点。在 HTMLDivElement.ondrop (thomaswd.com/Maze/:50:225) 的 drop (thomaswd.com/Maze/:18:15) 处”
我不知道这是什么意思
问题解决了吗？我同意 bighostkim，将 id 设置为 mouse。 DOMS (getelementbyid) 正在寻找 ID“鼠标”但没有看到它。

【解决方案2】：

这是因为您没有设置鼠标的 id。将此添加到您的鼠标图像中

id="mouse"

其次，对于每个 TD，您需要通过设置这些属性使其可放置。

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

【讨论】：