feat: GAUD-10642 mobile drag n drop - #7510
EdwinACL831 wants to merge 9 commits into
Conversation
…e it be static when performing the drag n drop on mobile.
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
| const dropTargetLeaveDelay = 1000; // ms | ||
| const touchHoldDuration = 400; // length of time user needs to hold down touch before dragging occurs | ||
| const scrollSensitivity = 150; // pixels between top/bottom of viewport to scroll for mobile | ||
| const scrollContainerSensitivity = 60; // pixels between top/bottom of scrollable container to scroll for mobile |
There was a problem hiding this comment.
IMHO I think it makes sense to have a smaller threshold to know when to start scrolling, since the scrolling container size is something we cannot control, therefore by making this small we are making sure that the user wants to scroll within that container...
| } | ||
|
|
||
| #scrollableContainer; | ||
| #touchAction = ''; |
There was a problem hiding this comment.
Since we are setting this touch-action to be none, we still want to revers it to how it was in case there was an existing touch-action value before.
| this._currentTouchListItem = listItem; | ||
| } | ||
|
|
||
| if (this.#improvedMobileScroll) this.#doScroll(touch); |
There was a problem hiding this comment.
I figure that we actually want to scroll first and then search for a droppable zone. That is because there this very edge-case where the draggable items are really big so just one a time can be displayed (I know this would be also a horrible UX). So at least the user could scroll up/down to find droppable zones in those cases.
|
|
||
| #doScroll(touch) { | ||
| if (!touch || !this.#scrollableContainer) return; | ||
| if (this.#scrollableContainer === document.body) { |
There was a problem hiding this comment.
So if the scrollable container is the body itself, we need to scroll the view port instead of the body itself.
| return listNode.shadowRoot.elementFromPoint(x, y); | ||
| } | ||
|
|
||
| _findListItemScrollableContainer(listItem) { |
There was a problem hiding this comment.
No sure if also this should have been using the # notation instead of the _
…w styles in the demo page.
8cfbb46 to
ab0fcc4
Compare
EdwinACL831
changed the title
1 participant
Jira
GAUD-10642
Description
This is something that happens when using draggable list items from a mobile device. We mimic the drag and drop behavior for them, specially the scrolling. This would only work if the items' scrolling parent is the document itself (a.k.a. browser view port). Therefore, we wanted to enable those draggable items to work fine within a different scrolling container (i.e.,
side-navpanel).This PR attempts to address that by mimicking the HTML5 native drap-n-drop API. To achieve this now by:
touch-action: noneinline style to the nearest scrollable parent found.This is also guarded by a Feature Flag: