HTML5拖放无法正常工作

时间:2013-02-13 03:18:43

标签: javascript html drag-and-drop

我正在使用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。尝试将鼠标拖动到指示的方块。它应该让Algernon留在那个盒子里。谢谢!

此外,是否可以阻止用户将鼠标拖过墙壁?谢谢!

2 个答案:

答案 0 :(得分:1)

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

就鼠标和错误而言,我也看不到。 但是,上面列出的错误是obvs。您的源/脚本存在问题。我浏览了一下,但没有任何内容,你在发布示例之前删除了JS吗?\

修改

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

doms(getelementbyid)正在寻找ID“鼠标”而无法找到它。设置图像ID =“鼠标”

我使用了chromes开发人员工具并在本地编辑此行并且它有效。并且鼠标没有问题。

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

答案 1 :(得分:0)

这是因为您没有设置鼠标的ID。将其添加到鼠标图像

id="mouse"

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

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