title: Put words in the right order to make a sentence with drag and drop
body: <p>I've read the answers to <a href="https://stackoverflow.com/questions/24816784/drag-and-drop-text-exercise">this question</a> and I came up with an exercise I wanted to test.</p>
  
  <p>There is an educational quiz where you have to put the words in the right order.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style type="text/css"&gt;
      body {background-color: black;}
      #div3 {margin-left: 0px;width:720px;height:200px;padding:50px;border:1px solid #aaaaaa;
        background-color: LightBlue;}
      span { margin: 20px; padding: 20px; background-color:#FFFF88; font-size: 50px;border: 0px solid;
        border-radius: 25px;box-shadow: 5px 5px 5px grey;}
      #quiz {margin-left: 0px;width:720px;height:200px;padding:40px;border:1px solid #aaaaaa;
        background-color: #FFFF88;}
      #quiz1 {border-radius: 0px;-webkit-touch-callout: none;-webkit-user-select: none;
        -khtml-user-select: none;-moz-user-select: moz-none;-ms-user-select: none;user-select: none;}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
       &lt;span id="word1" draggable="true" ondragstart="drag(event)"&gt;the&lt;/span&gt;
       &lt;span id="word2" draggable="true" ondragstart="drag(event)"&gt;piano&lt;/span&gt;
       &lt;span id="word3" draggable="true" ondragstart="drag(event)"&gt;play&lt;/span&gt;
       &lt;span id="word4" draggable="true" ondragstart="drag(event)"&gt;I&lt;/span&gt;  
     &lt;/div&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;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>code online:
  <a href="http://jsfiddle.net/gmouzakitis/C2f4P/5/" rel="nofollow">http://jsfiddle.net/gmouzakitis/C2f4P/5/</a></p>
  
  <p>Known Bugs 
   - Drag &amp; drop of a word before first word is not possible
   - When you drag and drop a word near or over another word they become like one
     draggable object. I dont want that.</p>
  
  <p>Is there another way to do it, using other javascript framework like angular.js, jQuery, other?</p>