Native HTML5 Drag and Drop in Mobile Safari (iPad, iPod, iPhone)?

I've successfully implemented native HTML5 Drag and Drop for moving HTML elements inside a page (just, say, a div from one place to another, nothing related to interacting with the host OS' files whatsoever). This works fine in Chrome and Safari on a PC but I can't start a drag operation in my iPad's Safari.

I've found this so far:

Using Drag and Drop From JavaScript

Safari, Dashboard, and WebKit-based applications include support for customizing the behavior of drag and drop operations within your HTML开发者_开发知识库 pages.

Note: This technology is supported only on desktop versions of Safari. For iPhone OS, use DOM Touch, described in Handling Events (part of Safari Web Content Guide) and Safari DOM Additions Reference.

Here. But it's outdated (2009-06-08).

Doe's anyone know if it is possible to use native HTML5 in Mobile Safari? (I don't want javascript-framework like solutions like jQuery UI).

Thanks!

I've just been trying to get native drag&drop working in ios safari (ipad pro with 14.0.1), and I'm updating this answer as it kept coming up as my first google result (and no other q&a seems to be up to date).

Following https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html I have found native html5 drag&drop now works in safari, with a few specific notes;

• You MUST set some data in OnDragStart's event; (the effect settings seem to be optional) Event.dataTransfer.setData('text/plain', 'hello');

• you MUST Event.preventDefault(); in OnDrop otherwise safari will load the data you added (unless that's your intention)

• OnDragOver event handler needs Event.preventDefault(); otherwise drop fails (unless intended, as docuemnted)

• On ios safari, if you set OnDragStart's Event.dataTransfer.dropEffect='copy' and in OnDragOver's Event.dataTransfer.dropEffect='link' the drop fails (no OnDrop()); Seems to be the only combination that fails

I thought you required

• CSS -webkit-user-drag: Element; and `-webkit-user-drop: element; or if you prefer

Element.style.setProperty('webkitUserDrag','element');
Element.style.setProperty('webkitUserDrop','element');

but it seems just the usual draggable attribute is enough Element.setAttribute('draggable',true);

This seems to be the bare minimum to drag & drop an element

        Element.setAttribute('draggable',true);
        
        function OnDragOver(Event)
        {
            Element.setAttribute('DragOver',true);
            Event.stopPropagation();    //  let child accept and don't pass up to parent element
            Event.preventDefault();     //  ios to accept drop
            Event.dataTransfer.dropEffect = 'copy';//   move has no icon? adding copy shows +
        }
        function OnDragLeave(Event)
        {
            Element.removeAttribute('DragOver');
        }
        function OnDrop(Event)
        {
            Element.removeAttribute('DragOver');
            Event.preventDefault();     //  dont let page attempt to load our data
            Event.stopPropagation();
        }
        function OnDragStart(Event)
        {
            Event.stopPropagation(); // let child take the drag
            Event.dataTransfer.dropEffect = 'move';
            Event.dataTransfer.setData('text/plain', 'hello');
        }
        Element.addEventListener('dragstart',OnDragStart);
        Element.addEventListener('drop',OnDrop);
        Element.addEventListener('dragover',OnDragOver);
        Element.addEventListener('dragleave',OnDragLeave);

Touch events do work now on Safari too (including Mobile). This article has nice code snippets that you can start from:

http://www.html5rocks.com/en/mobile/touch/