HTML 5拖放到正確的位置

我想爲孩子們製作一個簡單的教育遊戲，在那裏他們會拖放行星圖片，並需要將它們放入正確的盒子中。HTML 5拖放到正確的位置

我想弄清楚的是，需要讓JS檢查放在一個盒子上的元素是否與那個盒子相匹配。我迄今爲止的代碼允許我拖放但沒有檢查。這裏是我有：

<script type="text/javascript"> 

    function allowDrop(ev){ 
     ev.preventDefault(); 
    } 

    function drag(ev){ 
     ev.dataTransfer.setData("content", ev.target.id); 
    } 

    function drop(ev){ 
     ev.preventDefault(); 
     var image= ev.dataTransfer.getData("content"); 
     ev.target.appendChild(document.getElementById(image)); 
    } 
</script> 

<section id="planetbox"> 
    <img id="mercuryImg" draggable="true" ondragstart="drag(event)" src="./images/planets/mercury.gif"> 
</section> 

<section id="mercurybox"ondrop="drop(event)" ondragover="allowDrop(event)"> </section>

任何幫助將是非常好的。附：需要使用HTML 5，CSS和JS只是沒有圖書館:)

來源

2012-12-24 Mark H

你嘗試過這麼遠嗎？一種方法是在「drop」功能中進行檢查。將'image.id'與'ev.target.id'匹配，並且只在該對正確時附加，並且如果對不正確則相應地執行。 – Rikonator

嗨Rikonator，我已經設法做到這一點，通過添加一個如果下降事件。謝謝你的幫助：） –

我設法使用下面的代碼的功能下降（EV）來解決我的問題：

function drop(ev){ 
    ev.preventDefault(); 
    var image= ev.dataTransfer.getData("content"); 
    if (image == ev.target.id) { 
      ev.target.appendChild(document.getElementById(image)); 
    } 
    else { 

    } 
        }

來源

2012-12-24 21:10:57

HTML 5拖放到正確的位置

回答

相關問題