Page scrolling interferes with Drag and Drop on a touch interface

[xinspire]

This page https://whatsock.com/Templates/Drag/Sort/index.htm scrolls on a mobile device. Because it scrolls, dragging via touch drags the element AND scrolls the page, so the element cannot be repositioned. If I change the body CSS to overflow-y: hidden, the sorting works fine. One way to fix it is to prevent the page from receiving the touch drag event.

However, that leads to a different problem. More broadly speaking, scrolling is problematic in dragula (see github.com/bevacqua/dragula/issues/327 regarding the inability to scroll while dragging), which apex depends on for drag-and-drop functionality. When the screen size is small (or browser zoom level is big, as is often the case for users who need visual assistance), there's a high chance the list of draggable items + the droppable area won't fit completely in the viewport, so this lack of scrolling ability hinders accessibility.

I'm not sure what the best solution is at this point and would appreciate some guidance here. (How feasible is it for apex to swap out dragula for another drag and drop library?) Let me know if I should open a second issue for this broader problem.

Thanks in advance.

[accdc]

Hi, can you please clear your cache and try the test page again? I tried to fix the issue and uploaded the change so it should now be working, hopefully.

[xinspire]

I tried it on an incognito window. It works with the mouse, but not with the touch interface. See the attached screen recording.

https://user-images.githubusercontent.com/13107227/198157913-26142dd8-9d40-4dbf-b0a9-9574377619c5.mov

[accdc]

Thanks, I tried another fix by setting touch-action:none on the mirror object. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Can you retest the live page again after clearing your cache?

[accdc]

Hi, I've just pushed another update. This was challenging for me to fix because I am totally blind and literally cannot reproduce the issue for testing. The latest code fix within Dragula.js appears to have done the trick though after I had my coeditor verify it worked on his end.

When looking at the page at 100% as normal, it won't cause any extra scrolling when dragging the objects around as before.

However, if you pinch to zoom in, it throws the calculations off and doesn't work as intended, so it is then necessary to use the dropdown menus for moving these objects around instead.

I will look into this further to see if it is possible to recalculate the positions and offsets when this zooming occurs, but at least in most cases it should be working properly now.

Please reopen the issue if you still notice an issue here or file another if you notice something else that needs to be looked into.

All the best, Bryan Garaventa

[xinspire]

Sorry I didn't get a chance to test it until now. The behavior on the demo page is still glitchy. In the beginning, it doesn't register at all; I can only scroll. But after a while, I can touch and drag. It seems to work 50% of the time.

But the developer console shows a lot of errors: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>. That error accumulates continuously until I stop dragging.

Also, I greatly admire the fact that you can program while being totally blind! That is amazing.

[accdc]

Thanks, I'll reopen this until I have a fix that works as expected.

[accdc]

Hi, I believe the original issue as reported is now fixed. Can you confirm?

[xinspire]

Hi Bryan, it seems like on a real touch interface (I'm using an iPhone 13 Pro), the drag and drop works properly. I'm not able to reproduce any glitches on my phone. Firefox's mobile simulator also works well. Only Chrome's mobile simulator sometimes scrolls when trying to drag an element. I think I can live with that. Thanks for your hard work!

[accdc]

No problem, happy to help. :)