ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use touch-action: pan-y to fix DnD vs scroll (#2350)

Browse Source 
* Fix handleTouchMove not handling leaving elements

* Fix DnD vs scroll on mobile
This commit is contained in:
ekzyis 2025-07-29 00:11:21 +02:00 committed by GitHub
parent 0968c77bdf
commit 1dc4018a3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
styles/dnd.module.css
View File

@ -18,7 +18,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.draggable { .draggable {
/* https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */
touch-action: none; touch-action: pan-y;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;

12
wallets/client/context/dnd.js
View File

@ -123,17 +123,21 @@ export function useDndHandlers (index) {
if (isTouchDragging) { if (isTouchDragging) {
// Find the element under the touch point // Find the element under the touch point
const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY) const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY)
if (elementUnderTouch) { if (!elementUnderTouch) {
return dispatch({ type: DRAG_LEAVE })
}
const element = elementUnderTouch.closest('[data-index]') const element = elementUnderTouch.closest('[data-index]')
if (element) { if (!element) {
return dispatch({ type: DRAG_LEAVE })
}
const elementIndex = parseInt(element.dataset.index) const elementIndex = parseInt(element.dataset.index)
if (elementIndex !== index) { if (elementIndex !== index) {
dispatch({ type: DRAG_ENTER, index: elementIndex }) dispatch({ type: DRAG_ENTER, index: elementIndex })
} }
} }
} }
}
}
}, [touchStartX, touchStartY, isTouchDragging, index, dispatch]) }, [touchStartX, touchStartY, isTouchDragging, index, dispatch])
const handleTouchEnd = useCallback((e) => { const handleTouchEnd = useCallback((e) => {