title: HTML 5 and JavaScript
body: <p>I want some interaction on my game. Currently, I can drag them over the recycle bin and then they stay there. I would like them to disappear and leave a message that says, Yes, you are correct or good recycling. How do I do this? I'm just learning javascript, so I need simple. </p>
  
  <p>Here is the code I have so far. </p>
  
  <pre><code>        &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
          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;
          }
  
  
  
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  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();
  }
  
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="instructions"&gt;
  &lt;p&gt;This is Ms. Mumford's Recycle Game. You will learn about recycling. Some items on this page cannot be recycled. Others can. &lt;/p&gt;
  &lt;p&gt;Drag the things that you can recycle to the recycle bin.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
  &lt;div&gt;
  &lt;img id="drag1" src="../Images/Mountaindew.png" draggable="true" ondragstart="drag(event)" /&gt;
  &lt;img id="drag2" src="../Images/snapple.png" draggable="true" ondragstart="drag(event)" /&gt;
  &lt;img id="drag3" src="../Images/newspaper.png" draggable="true" ondragstart="drag(event)" /&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>