title: Check if a div contains an image (HTML5 Drag and Drop)
body: <p>I've created a simple drag and drop game with HTML5.
  The items drag and drop as they should, however on drop I would like it to check if the image that is placed within the answer box div matches a javascript requirement.</p>
  
  <p>Javascript to handle Drag and Drop events:</p>
  
  <pre><code>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));
  if($('#answer1').find('#target1').length == 1)
  {
      alert("CORRECT!");
  }
  }
  </code></pre>
  
  <p>might carry out this operation on drop, however nothing happens.
  The image is within a div to start with, and the ID of the image itself is <code>answer1</code> and the correct answer box is of course <code>target1</code>.</p>
  
  <p>Below is the HTML for the drag and drop:</p>
  
  <pre><code>&lt;div id="answerBoxes"&gt;
  &lt;div id="target1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  &lt;/div&gt;
  &lt;div id="target2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  &lt;/div&gt;
  &lt;div id="target3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  &lt;/div&gt;
  &lt;div id="target4" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  &lt;/div&gt;
  &lt;/div&gt; &lt;!-- end of answerBoxes --&gt;
  &lt;div id="whatsWhatContent"&gt;
  &lt;div id="answers"&gt;
     &lt;div id="answer1Box" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
         &lt;img id="answer1" src="Images/Icons/FlowerAnswer.png" draggable="true"    ondragstart="drag(event)" alt="Flower answer box draggable"/&gt;
     &lt;/div&gt;
  
  
     &lt;div id="answer2Box" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
         &lt;img id="answer2" src="Images/Icons/StemAnswer.png"  draggable="true" 
  ondragstart="drag(event)" alt="Stem answer box draggable"&gt;
  &lt;/div&gt;
  
     &lt;div id="answer3Box" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
        &lt;img id="answer3" src="Images/Icons/RootAnswer.png"  draggable="true" ondragstart="drag(event)" alt="Root answer box draggable"&gt;
  &lt;/div&gt;
  
     &lt;div id="answer4Box" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
        &lt;img id="answer4" src="Images/Icons/LeafAnswer.png"  draggable="true" ondragstart="drag(event)" alt="Leaf answer box draggable"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS For the div around the image:</p>
  
  <pre><code>#answer1Box
  {
  float:left;
  width: 125px;
  height: 40px;
  }
  </code></pre>
  
  <p>CSS for the answer box where the image should be dropped:</p>
  
  <pre><code>#target1
  {
  width: 120px;
  height: 38px;
  background-color: white;
  margin-top: 30px;
  border-radius: 5px;
  border: 2px solid black;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/fSUNX/" rel="nofollow">http://jsfiddle.net/fSUNX/</a> for full CSS</p>