無法使用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進行拖放操作（已解決！）

回答

相關問題