Open Bug 1764177 Opened 2 years ago Updated 4 days ago

Support HTML drag-and-drop API with touch events on Android

Categories

(Core :: DOM: Events, enhancement)

Product:
Core
Component:
DOM: Events
Platform:
Unspecified
Android
Type:
enhancement

Tracking

()

Project Flags:
Webcompat Priority P3

People

(Reporter: botond, Unassigned)

References

Details

The HTML drag-and-drop API is not currently supported with touch events on Android.

It appears to be at least partially supported in Chromium on Android, based on the following:

https://bugs.chromium.org/p/chromium/issues/detail?id=156390#c56
https://bugs.chromium.org/p/chromium/issues/detail?id=1293803

And we've come across at least one site so far (player.fm) which seems to be relying on it:

https://github.com/webcompat/web-bugs/issues/63560 (analysis in https://bugzilla.mozilla.org/show_bug.cgi?id=1719855#c2)

We should consider adding comparable support to Firefox.

From on a conversation with Agi in the #geckoview Matrix channel:

drag-n-drop on mobile could happen just with platform support, as you can't really drag anything from outside the browser like you can on Desktop

Hence filing as a Gecko issue.

Webcompat Priority: --- → ?

This probably still wants a drag service implementation in widget/android, if only for consistency with other platforms

This is causing valid WebCompat issues, but it's low-priority from out point of view (for now).

Webcompat Priority: ? → P3

It looks like Windows is the only platform for which touch-drag-and-drop is hooked up in Firefox (although the drag service exists on other desktop platforms for implementing mouse-drag-and-drop). It was hooked up in bug 1147335; the patch there may be useful as a guide for part of the work that needs to be done here.

Note, it looks like on Windows the way to activate a touch-drag-and-drop is to double-tap and then drag, but on mobile the expected way seems to be long-tap and then drag.

See Also: → 1781142
OS: Unspecified → Android
See Also: → 1719855
Depends on: 1586471

(In reply to Botond Ballo [:botond] from comment #0)

From on a conversation with Agi in the #geckoview Matrix channel:

drag-n-drop on mobile could happen just with platform support, as you can't really drag anything from outside the browser like you can on Desktop

Hence filing as a Gecko issue.

Note, it looks like we were mistaken about this limitation ("you can't really drag anything from outside the browser like you can on Desktop"). For example, from bug 1586471 comment 0:

When filling in web forms/payment pages a user may want to use split screen mode and drag a text field from one app into the relevant field on the website.

For example dragging and dropping from 1Password, as shown on this page into Chrome: https://support.1password.com/getting-started-android/#drag-and-drop-to-fill-in-other-apps

Hi all,

Firefox on Android is now an outlier by not supporting the browsers drag and drop API.

  • Chrome on Android - Supported since Android@7 (August 2016)
  • Android web view (as above)
  • All browsers on iOS - Supported since iOS@15 (September 2021)
  • Firefox on Android - No support

Context: it is common to use the web platform drag and drop functionality to drive a whole range of drag and drop functionality. All of which is broken on Firefox on Android right now. At Atlassian, we recently released Pragmatic drag and drop which leverages drag and drop on the web platform, and it is currently not working on Firefox on Android

Flags: needinfo?(peterv)

Firefox Android 124+ supports this API (drag operation and drop operation) using mouse operation. Also, Firefox can accept drop event by dragged item (text only) from external application even if touch.

Although Chrome supports this, it has a limitation. If a11y service that supports gesture or touch exploration is enabled, drag operation won't work at least. When I test it on my Pixel 6a + Android 14, Chrome doesn't support drag operation using touch operation.

It does not appear as though Firefox@124 supports the web platform drag and drop API

Test URLs:

Tested on:

(In reply to Alex Reardon from comment #7)

Test URLs:

(You commented out dragstart event listener BTW)

basic usage of Pragmatic drag and drop: https://codesandbox.io/p/sandbox/wild-glade-pqr3cp?file=%2Fsrc%2Fexample.tsx

Does this work on Chrome though? It never responds on touch nor pen there either. Test on Android 14 on Galaxy S22 Ultra.

Flags: needinfo?(alexreardon)

The first link now works on Chrome on Android

super basic: https://codesandbox.io/p/sandbox/basic-draggable-test-d7l7fv?file=%2Fsrc%2Fstyles.css%3A6%2C14

(for Chrome on Android you have to have to set some native data for a drag to start)

The second link works on Chrome on Android

basic usage of Pragmatic drag and drop: https://codesandbox.io/p/sandbox/wild-glade-pqr3cp?file=%2Fsrc%2Fexample.tsx

Flags: needinfo?(alexreardon)

Thanks! I can confirm both works on Chrome with long touch to initiate drag (which does not work on Windows, probably because doing so opens context menu there?)

Firefox Android 124+ supports this API (drag operation and drop operation) using mouse operation. Also, Firefox can accept drop event by dragged item (text only) from external application even if touch.

I tested the "super basic" test above on Firefox Nightly and the drag did not start with mouse drag, do we also have some condition to actually start dragging as Chrome does as comment #9 says?

Flags: needinfo?(m_kato)

Both test works on my Pixel 4a + Android 13 with mouse operation on Firefox Nightly. What's different?

Flags: needinfo?(m_kato)

Chrome may not work if drag item is image even if WebKit/iOS works

Huh, I force-stopped Nightly and restarted and now it works 🤔

Just found that we have code to make double tapping work as drag gesture on Windows, and both tests work with it: https://searchfox.org/mozilla-central/rev/d7c5387a43bda5163afcb9e65e17c476c6ecf625/widget/windows/nsWindow.cpp#4127

Maybe Android can do something similar but with long touch? (because double tapping causes zooming, haha platform differences 🙂)

Just found that we have code to make double tapping work as drag gesture on Windows, and both tests work with it: https://searchfox.org/mozilla-central/rev/d7c5387a43bda5163afcb9e65e17c476c6ecf625/widget/windows/nsWindow.cpp#4127

It is comment #3 and bug 1147335.

Maybe Android can do something similar but with long touch? (because double tapping causes zooming, haha platform differences 🙂)

Yes for other mobile browsers (Chrome/Android and Safari/iOS). Although botond already adds the comment in this bug, when APZ (in GPU process?) detects long tap gesture, if it is handed as drag gesture, we have to call nsIDragService.invokeDragSession. This is XPCOM method, so we have to call it on main thread in chrome process.

Flags: needinfo?(peterv)

I am not entirely sure where this discussion is up to. Please let me know if you need any more information. Last I checked, the current state of things is that web platform drag and drop is working on Chrome on Android, but not on Firefox on Android.

You need to log in before you can comment on or make changes to this bug.