Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Touch devices: Drag and Drop #2323

Open
jhou-pro opened this issue Oct 4, 2024 · 0 comments
Open

Touch devices: Drag and Drop #2323

jhou-pro opened this issue Oct 4, 2024 · 0 comments
Labels
Android Should be used to identify Android specific functionality/defects iOS Should be used to identify iOS specific functionality/defects

Comments

@jhou-pro
Copy link
Contributor

jhou-pro commented Oct 4, 2024

Description

Drag and Drop functionality is now used for customising Compound Master menu items order (#2044) and Insertion Point layout (#2275). Even though Drag and Drop API is supported in all major browsers, our functionality is not working on touch devices, including both Android and iOs.

Investigation notes

We used the following devices for testing:

Android 13*,      Moto G32, Chrome 128.0.6613.147  Blink / V8
iOs   18.0*, iPhone 12 Pro, Chrome 128.0.6613.98   WebKit / JSC
  * iOs 18.0 (22A3354) updated on 25.09.2024
  * Android 13         updated on 1.09.2024

On both devices we started with tg-drag-example.html and it worked. However, in the context of PWA only dragstart events were occuring, not dragover and drop / dragend. It was suggested that touch tasks such as scroll / zoom / swipe / tap may interfere with D'n'D. Some events were removed (tooltip, insertion point move) to avoid interference, but to no avail. Also passive:false listeners та touch-action: none style was used for draggable items - dragover / drop were still missing.

The polyfill was not very helpful. It allowed to drag on Android but not on iOs. And there were other problems including full application freeze during dragging over Entity Centre component.

Expected outcome

Fully functional Drag and Drop on touch devices.

@jhou-pro jhou-pro added Android Should be used to identify Android specific functionality/defects iOS Should be used to identify iOS specific functionality/defects labels Oct 4, 2024
jhou-pro added a commit that referenced this issue Oct 5, 2024
By removing 'draggable' attribute and removing 'drag*/drop*' events for browsers not supporting touch events.
jhou-pro added a commit that referenced this issue Oct 5, 2024
By removing 'draggable' attribute and removing 'drag*/drop*' events for browsers supporting touch events. And also by making drag anchor hidden when menu item is touched and hold. refs #2044
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Android Should be used to identify Android specific functionality/defects iOS Should be used to identify iOS specific functionality/defects
Projects
None yet
Development

No branches or pull requests

1 participant