title: HTML5 Drag & Drop Paragraph from Button
body: <p>I have the following code (slightly modified from <a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop" rel="nofollow">http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop</a></p>
  
  <p>I modified it to work with <code>&lt;p&gt;</code> elements.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          .div 
          {
              width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;
          }
      &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;div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
      &lt;p id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;Code&lt;/p&gt;
      &lt;p id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;Code&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, there are basically two boxes that you can drag paragraphs within. My question is that how would I go about dragging a paragraph from a button? I am actually working on this for a mobile app and I am wondering how I can have it so that the user drags a paragraph from the button to the page. Any help would be appreciated!</p>