title: HTML5 Drag & Drop for Mobile
body: <p>This is my implementation of WHATWG HTML5 <a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" rel="nofollow">Drag and Drop</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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.innerHTML+=" &lt;p&gt;"+document.getElementById(data).innerHTML+"&lt;/p&gt;";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div {
      width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&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;button id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;Code&lt;/button&gt;
      &lt;button id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;Code&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works fine in Google Chrome, but not in iOS or Android. I have read other topics about this but most of them suggest using jQuery or a JavaScript plugin.</p>
  
  <p>Is it possible to make the HTML drag and drop implementation work on iOS and Android (mobile devices)?</p>