title: Drag & Drop on Safari iOS: Won't drag, won't respond to drop on desktop/iPad
body: <p>I am coding a webpage to be viewed on iPad. It uses Safaris/Webkits drag &amp; drop. I have exactly copied Safari's example drag &amp; drop code but it won't work.</p>
  
  <p><strong>My Problem:</strong> The ondrop event is never triggered when I run the webpage (HTML, CSS &amp; Javascript) on Safari Desktop or on Safari on an iPad. On ipad I cannot even drag the elements (the microscope thingie appears &amp; it won't drag when I hold &amp; move my finger over the element). The drag does work on desktop though.</p>
  
  <p>What's going wrong?</p>
  
  <p>The small code example can be found at the very bottom of this page: <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html" rel="nofollow noreferrer">https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Drag-and-Drop&lt;/title&gt;
  
    &lt;script&gt;
      &lt;!--
      var dragitem = undefined;
  
      function setdragitem(item, evt) {
        dragitem = item;
        // alert('item: '+item);
        // item is an HTML DIV element.
        // evt is an event.
  
        // If the item should not be draggable, enable this next line.
        // evt.preventDefault();
  
        return true;
      }
  
      function cleardragitem() {
        dragitem = undefined;
        // alert('item: '+item);
      }
  
      function dodrag() {
        // alert('item: '+dragitem);
      }
  
      // This is required---used to tell WebKit that the drag should
      // be allowed.
      function handledragenter(elt, evt) {
        evt.preventDefault();
        return true;
      }
  
      function handledragover(elt, evt) {
        evt.preventDefault();
        return true;
      }
  
  
      function handledragleave(elt, evt) {
  
      }
  
      function handledrop(elt, evt) {
        // alert('drop');
        dragitem.style.display = "none";
        var newid = dragitem.id + '_dest';
        var dest = document.getElementById(newid);
        dest.innerHTML = dragitem.innerHTML;
      }
  
  
      // --&gt;
    &lt;/script&gt;
  
    &lt;style&gt;
      &lt;!-- .wordbox {
        border: 1px solid black;
        text-align: center;
        width: 50px;
        float: left;
        -webkit-user-drag: element;
        -webkit-user-select: none;
      }
      
      .spacer {
        clear: both;
      }
      
      .target {
        margin-top: 30px;
        padding: 30px;
        width: 70px;
        border: 1px solid black;
        background: #c0c0ff;
        margin-bottom: 30px;
        -webkit-user-drop: element;
      }
      
      .word {
        margin: 30px;
        min-height: 30px;
        border-bottom: 1px solid black;
        width: 50px;
        float: left;
      }
      
      --&gt;
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;p&gt;Drop words onto target area to put them in their places.&lt;/p&gt;
  
    &lt;div class='wordbox' id='this' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'&gt;This&lt;/div&gt;
    &lt;div class='wordbox' id='is' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'&gt;is&lt;/div&gt;
    &lt;div class='wordbox' id='a' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'&gt;a&lt;/div&gt;
    &lt;div class='wordbox' id='test' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'&gt;test&lt;/div&gt;
  
    &lt;div class='spacer'&gt;&lt;/div&gt;
    &lt;div class='target' ondragenter='handledragenter(this, event);' ondragover='handledragover(this, event);' ondragleave='handledragleave(this, event);' ondrop='handledrop(this, event);'&gt;TARGET&lt;/div&gt;
  
    &lt;div class='words'&gt;
      &lt;div class='word' id='this_dest'&gt;&lt;/div&gt;
      &lt;div class='word' id='is_dest'&gt;&lt;/div&gt;
      &lt;div class='word' id='a_dest'&gt;&lt;/div&gt;
      &lt;div class='word' id='test_dest'&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Here is the JSFiddle</strong> (remember the drag &amp; drop is Webkit so only for Safari-this webpage is for ipad only): <a href="https://jsfiddle.net/eyM3y/" rel="nofollow noreferrer">https://jsfiddle.net/eyM3y/</a></p>