HTML 5とJavaScript

私のゲームにはいくつかのやり取りが必要です。現在、私はそれらをごみ箱にドラッグすることができ、その後、彼らはそこにとどまります。私はそれらを消して、メッセージを残したいと思います。はい、あなたは正しいかリサイクルしています。これはどうすればいいですか？私はちょうどJavaScriptを学んでいるので、私は単純な必要があります。HTML 5とJavaScript

これまでのコードは次のとおりです。

 <!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 

     body { 

     } 
     #div1 { 
    width:478px; 
    height:331px; 
    padding:10px; 
    background-image:url(../Images/recycle_bin.png); 
    background-repeat:no-repeat; 
    vertical-align:middle; 
    margin:auto; 
    text-align:center; 
    position:absolute; 
    left:40%; 
    } 

     *[draggable=true] { 
      -moz-user-select:none; 
      -khtml-user-drag: element; 
      cursor: move; 
     } 

     .instructions { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:19px; 
    color:#255e02; 
    font-weight:bold; 
    line-height:12px; 
     } 



</style> 


<script type="text/javascript"> 

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

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

function drop(ev) 
{ 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
ev.preventDefault(); 
} 


</script> 


</head> 
<body> 
<div class="instructions"> 
<p>This is Ms. Mumford's Recycle Game. You will learn about recycling. Some items on this page cannot be recycled. Others can. </p> 
<p>Drag the things that you can recycle to the recycle bin.</p> 
</div> 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div> 
<img id="drag1" src="../Images/Mountaindew.png" draggable="true" ondragstart="drag(event)" /> 
<img id="drag2" src="../Images/snapple.png" draggable="true" ondragstart="drag(event)" /> 
<img id="drag3" src="../Images/newspaper.png" draggable="true" ondragstart="drag(event)" /> 
</div> 

</body> 
</html>

出典

2012-03-29 ajcoder

ただ、このように、drop()の終わりに

//using jQuery to empty the div, or document.getElementById("div1").innerHTML="" 
$("#div1").empty(); 
//alert, or add your own popup 
alert("Yes, you are correct or good recycling.");

を追加します。

function drop(ev){ 
    var data=ev.dataTransfer.getData("Text"); 
    ev.target.appendChild(document.getElementById(data)); 
    ev.preventDefault(); 
    document.getElementById("div1").innerHTML=""; 
    alert("Yes, you are correct or good recycling."); 
}

LIVEデモ：http://jsfiddle.net/DerekL/Nb3An/
（フルスクリーン）http://jsfiddle.net/DerekL/Nb3An/show

出典

2012-03-29 04:27:26

HTML 5とJavaScript

答えて

関連する問題