title: HTML 5 Drag and Drop in correct position
body: <p>I am trying to make a simple educational game for kids, where they will drag and drop pictures of planets and need to put them in the correct boxes in the correct order.</p>
  
  <p>What I'm trying to figure out is the JS needed to let check the element being dropped on a box is the one that will match that box. The code I have so far allows me to drag and drop but has no check. Here is what I have:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      function allowDrop(ev){
          ev.preventDefault();
      }
  
      function drag(ev){
          ev.dataTransfer.setData("content", ev.target.id);
      }
  
      function drop(ev){
          ev.preventDefault();
          var image= ev.dataTransfer.getData("content");
          ev.target.appendChild(document.getElementById(image));
      }
  &lt;/script&gt;
  
  &lt;section id="planetbox"&gt;
      &lt;img id="mercuryImg" draggable="true" ondragstart="drag(event)" src="./images/planets/mercury.gif"&gt;
  &lt;/section&gt;
  
  &lt;section id="mercurybox"ondrop="drop(event)" ondragover="allowDrop(event)"&gt; &lt;/section&gt;
  </code></pre>
  
  <p>Any help would be really great. P.S. needs to use HTML 5, CSS and JS only no libraries :)</p>