Investigate iOS 11 Safari Drag-And-Drop Support

[reppners]

Missed the news that iOS11 introduced drag and drop support and also Safari may be able to integrate the native iOS drag and drop?

https://developer.apple.com/ios/drag-and-drop/

https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html#//apple_ref/doc/uid/30001233-BAJGJJAH

This needs investigation and some poking - maybe this polyfill can feature detect support and help adoption?

[lincolnthree]

I seem to be having some conflicts with this new feature, as well. It seems it's partially working. Some of my draggable elements seem to automatically participate in the native drag-drop functionality, but others do not, and use the polyfill. It also seems that they kick in at different times. If the polyfill is active, native drag&drop kicks in some of the time time, but some elements don't seem to be draggable while others are - not sure why yet. E.g. not sure what makes some work and some not.

When native drag kicks in, it can't be dropped in any drop-zones, though it does appear to recognize them as droppable zones - probably due to the fact that the drag-data is in a different format? Just guessing here...

Without the polyfill, the native drag and drop recognizes most zones okay, but misses others... Will try to dig in and get more detailed info. But wanted to join the thread since this seems related. Please let me know if not!

Total noob at this so not really sure what kind of info to give.

iPad Air 2
Cordova application using Angular2 and ng-drag-drop

[lincolnthree]

Interesting... small update:

Adding the following CSS seems to have made behavior a little more sane, and the native drag&drop does not kick in:

  * {
    -webkit-user-drag: none;
  }

[reppners]

Welcome and thanks for sharing your findings 👍

You're the first source confirming that native drag and drop is at all possible in iOS11 web content! Thats good and bad news because I suppose it's drag and drop handling will introduce it's own set of quirks (like all browsers did) and hopefully we can find a way to make the polyfill not step on the toes of native drag and drop and vice versa.

[lincolnthree]

Thanks! Glad to find an active drag/drop project! I'd been using a 3 year old polyfill and tweaking it myself (gently.)

Another small update. Using the -webkit-user-drag: none; attribute seems to allow the polyfill to completely take over and prevent any of the conflicts from occurring, but it would be nice to figure out what's going on and how to make them play nice together.

Ah, I did make one small update to the polyfill to force disabling "passive" and "capture" modes in the document listener registration, though I'm not 100% certain this is related to blocking the native functionality:

https://github.com/timruffles/mobile-drag-drop/blob/master/src/internal/dom-utils.ts#L17
changed to:

export function addDocumentListener( ev:string, handler:EventListener, passive:boolean = true ) {
    document.addEventListener( ev, handler, supportsPassive ? { passive: false, capture: false } : false );
}

[dpogue]

Important note: Mobile Safari's native drag-n-drop support is only enabled on iPad, not on iPhone.

As of iOS 11.2 or 11.3, they also support the standard draggable attribute.

[reppners]

@dpogue Thanks for sharing your knowledge. Is there some documentation available from Apple?

[dpogue]

Not that I know of... I submitted a bug report that it wasn't working on iPhone and was told it was iPad only, I asked about any documentation and was told to submit a new bug 🤷🏼‍♂️

[reppners]

Not that I know of... I submitted a bug report that it wasn't working on iPhone and was told it was iPad only, I asked about any documentation and was told to submit a new bug 🤷🏼‍♂️

Oh dear.. 😦

[erik127]

@lincolnthree thanks for the -webkit-user-drag: none;. Half the time the native drag and drop got triggered in my app on an ipad with ios 11.3. That resulted in safari opening google and googling for whatever data was in the drop object.
You could see when the native DnD got triggered, it would show a green circle with a + on the top right of the drag image.

[lincolnthree]

YES, exactly. The green circle with + is what tipped me off that something other than mobile-drag-drop was being invoked.

[cdoss-scholastic]

It might be possible to have the drag and drop shim disabled on iOS 11+. If you can figure out if drag and drop is supported by changing the logic here: https://github.com/timruffles/mobile-drag-drop/blob/master/release/index.js#L21

Modernizr looked interesting: https://www.html5rocks.com/en/tutorials/dnd/basics/

[pascaldekloe]

“This technology is supported with Safari 11 in both macOS and iOS.”
— https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html

[franciscolourenco]

Is iOS 12 supported by the polyfill?

[erik127]

@franciscolourenco I haven't seen any issues on iOS 12.2