I have created the following code. I want people to drag the objects that are recycleable in the bin and a message to pop up that says "yes, you can recycle this". The others would have a remark that says something like "no, you cannot recycle this".
At the end. I want to say, congratulations, you are learning to recycle. How do I do this? My javascript skills are very little.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
}
#div1 {
width:478px;
height:331px;
padding:0px;
background-image:url(../Images/recycle_bin.png);
background-repeat:no-repeat;
vertical-align:middle;
margin:auto;
text-align:center;
position:absolute;
left:50%;
}
*[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> </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)" />
<img id="drag4" src="../Images/hotdog.png" draggable="true" ondragstart="drag(event)" />
<img id="drag5" src="../Images/sneaker.png" draggable="true" ondragstart="drag(event)" />
</div>
</body>
</html>