I am coding a webpage to be viewed on iPad. It uses Safaris/Webkits drag & drop. I have exactly copied Safari's example drag & drop code but it won't work.

My Problem: The ondrop event is never triggered when I run the webpage (HTML, CSS & Javascript) on Safari Desktop or on Safari on an iPad. On ipad I cannot even drag the elements (the microscope thingie appears & it won't drag when I hold & move my finger over the element). The drag does work on desktop though.

What's going wrong?

The small code example can be found at the very bottom of this page: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html

<!DOCTYPE html>
<html>

<head>
  <title>Drag-and-Drop</title>

  <script>
    <!--
    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) {
      ev
javascript html css safari drag-and-drop
Edit
Report