HTML 5 및 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."); 
}

라이브 데모 : http://jsfiddle.net/DerekL/Nb3An/
(전체 화면) http://jsfiddle.net/DerekL/Nb3An/show

출처

2012-03-29 04:27:26

HTML 5 및 JavaScript

답변

관련 문제