title: Value of a Drag and Drop with the click of a button
body: <p>I'm trying to create a quiz that registers the actions of dragging and dropping. So if you drag the correct 'squares' into the correct 'boxes' and then click the submit button, a result is displayed.</p>
  
  <p>The problem I'm having is: How will the Javascript understand which square is in which box once the submit button is pressed?</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;style&gt;
  #div1, #div2{float:left; width:50px; height:50px; margin:3px;}
  #div3, #div4{float:left; width:56px; height:56px; margin:3px;}
  &lt;/style&gt;
  
  &lt;script&gt;
  function allowDrop(ev){ev.preventDefault();}
  
  function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
  
  function drop(ev){ev.preventDefault();
                    var data=ev.dataTransfer.getData("Text");
                    ev.target.appendChild(document.getElementById(data));
                   }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;center&gt;
  
  &lt;div style="position:absolute; left: 50px; top: 0px;"&gt;
  &lt;div id="div1" style="background:#00f" draggable="true" ondragstart="drag(event)"     id="drag1"&gt;&lt;/div&gt;
  &lt;div id="div2" style="background:#f00" draggable="true" ondragstart="drag(event)" id="drag2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="position:absolute; left: 40px; top: 100px;"&gt;
  &lt;div id="div3" style="border:3px solid #00f" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  &lt;div id="div4" style="border:3px solid #f00" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="position:absolute; left: 75px; top: 200px;"&gt;
  &lt;button type="button" class="myBttn" onclick="doSomething()"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>