无法使用HTML5/javascript进行拖放操作（已解决！）

因此，我现在只学习了几个月的html/css/javascript，并且我似乎无法使用拖放操作HTML5/JavaScript的。我实际上并没有制作一个网站或任何我只是想学习的东西，而且我有html元素可以通过jQuery拖动，我似乎无法让它与html5/javascript一起工作。无法使用HTML5/javascript进行拖放操作（已解决！）

我的HTML代码如下：

<DOCTYPE html> 
    <html> 
     <body> 
      <img id="steam" src="http://www.omgubuntu.co.uk/wp-content/uploads/2012/07/Steam_Logo.png" draggable="true" ondragstart="drag(event)" /> 
      <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div> 
     </body> 
    </html>

我的CSS代码如下：作为跟随

#div1 { 
width:350px; 
height:350px; 
border:2px solid #AA560B; 
}

我的javascript：

window.onload = function(){ 
    function allowDrop(ev){ 
     ev.preventDefault(); 
    } 
    function drag(ev){ 
     ev.dataTransfer.setData("text",ev.target.id); 
    } 
    function drop(ev){ 
     ev.preventDefault(); 
     var data=ev.dataTransfer.getData("text"); 
     ev.target.appendChild(document.getElementById(data)); 
    }    
}

我不完全确定我做错了什么。任何帮助将不胜感激。

来源

2013-05-02 David Suzuki Moore

你能在开发者控制台看到任何Javascript错误吗？ – 2013-05-02 01:04:22

只是allowdrop事件没有被定义，但我解决了这个问题。感谢您的答复。 – 2013-05-02 23:18:39

你在你的HTML中有一个拼写错误，你的HTML函数不像camelcase那样在Javascript中。

这条线：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

变化的AllowDrop到的AllowDrop。

小提琴：http://jsfiddle.net/U55rc/

你现在有定位问题，因为箱子会自动捕捉没有蒸汽标志有顶部，但是这完全是另外一个问题。

来源

2013-05-02 04:58:24 tomca32

谢谢你的工作。 – 2013-05-02 23:17:51

无法使用HTML5/javascript进行拖放操作（已解决！）

回答

相关问题