我想要在我的游戏中进行一些互动。目前，我可以将它们拖到回收站上，然后它们就留在那里。我希望他们消失并留下一条信息，说:是的，你是正确的或很好的回收。我该怎么做呢？我刚刚学习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>
最佳答案
只需添加
//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.");
在drop()的末尾，如下所示:
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
关于javascript - HTML 5 和 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9918242/