search

atlassian / pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
https://atlassian.design/components/pragmatic-drag-and-drop
Other
6.94k stars 96 forks source link

Support: Windows touch screen #12

Open ajmchambers opened 1 month ago

ajmchambers commented 1 month ago

Trying out the examples in the documentation on a surface device with latest windows and edge, none of them seem to work with touch - pressing and holding does not start the drag and drop process.

alexreardon commented 1 month ago

Generally speaking, support for browser drag and drop is fantastic. Touch screens on Windows 11 is a holdout. I'll raise an issue for them to look into it.

Chrome workaround (for users)

alexreardon commented 1 month ago

This might also be helpful: https://answers.microsoft.com/en-us/surface/forum/all/drag-drop-with-surface-touch-screen/08015e4e-f434-430d-a08c-14cf8dae5fe9

alexreardon commented 1 month ago

I'm trying to figure out where the best place is to raise this Windows issue

alexreardon commented 1 month ago

@ajmchambers which version of windows and browsers are you using?

ajmchambers commented 1 month ago

Here is my windows version:

I've also now tried out the examples on Firefox and Chrome too:

This seems to be the most relevant chromium issue I can find (its been around for a while):

Haven't found a relevant issue for firefox yet

I tested chrome and edge with #enable-touch-drag-drop flag:

Haven't found an equivalent flag for firefox.

Wonder why this flag isn't enabled by default?

Seems pretty bad to have to ask your users to go into their browser and change a flag in order to use your website properly.

Semi-related but I found this:

The DragDropTouch polyfill attaches listeners to the document's touch events:

  • On touchstart, it checks whether the target element has the draggable attribute or is contained in an element that does. If that is the case, it saves a reference to the "drag source" element and prevents the default handling of the event.
  • On touchmove, it checks whether the touch has moved a certain threshold distance from the origin. If that is the case, it raises the dragstart event and continues monitoring moves to fire dragenter and dragleave.
  • On touchend, it raises the dragend and drop events.

To avoid interfering with the automatic browser translation of some touch events into mouse events, the polyfill performs a few additional tasks:

  • Raise the mousemove, mousedown, mouseup, and click events when the user touches a draggable element but doesn't start dragging,
  • Raise the dblclick event when there's a new touchstart right after a click, and
  • Raise the contextmenu event when the touch lasts a while but the user doesn't start dragging the element.

There is a demo here which works for me (chrome/edge with and without flag set, also firefox):

Might provide some possible work arounds/ideas.

alexreardon commented 1 month ago

Another mitigation (not ideal)

If you wire up alternative flows as per our accessibility guide, users will be able to achieve the same outcomes as drag and drop operations without drag and drop

alexreardon commented 1 month ago

Using a drag and drop pollyfill for browsers will a lack of support might be possible, but there is a lot of nuance in those APIs that would need to be captured correct 🤔

I would think a good path here would be to find / create a fantastic pollyfill and then conditionally load that in for browsers that need it

ajmchambers commented 1 month ago

Some more tests.

Tested touch/mouse/stylus with a few android browsers:

Though firefox and samsung internet do seem to work with touch with the same polyfill demo as above:

Just to complete things, tested stylus on windows - behaves the same as touch across the browsers.