Mobile fix for Project view: Add delay to Sortable.js on mobile, to ensure scrolling is possible. (#22152)

Mobile / touch devices currently get "hung up" on the sortable action,
preventing any ability to visually scroll through the Project board to
see issues.

Solution: Sortable.js has a built-in fix using `delayOnTouchOnly`

BEFORE

https://user-images.githubusercontent.com/24665/208266817-6f2968b7-4788-4656-a941-f85b25fc59d5.mp4

AFTER

https://user-images.githubusercontent.com/24665/208266822-3d327002-7a9d-41cf-9890-6d6b8dcb17be.mp4

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
Nathaniel Sabanski 2022-12-20 20:56:58 -08:00 committed by GitHub
parent 86ace4b5c2
commit 8e267afd35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -49,6 +49,8 @@ async function initRepoProjectSortable() {
filter: '[data-id="0"]', filter: '[data-id="0"]',
animation: 150, animation: 150,
ghostClass: 'card-ghost', ghostClass: 'card-ghost',
delayOnTouchOnly: true,
delay: 500,
onSort: () => { onSort: () => {
boardColumns = mainBoard.getElementsByClassName('board-column'); boardColumns = mainBoard.getElementsByClassName('board-column');
for (let i = 0; i < boardColumns.length; i++) { for (let i = 0; i < boardColumns.length; i++) {
@ -76,6 +78,8 @@ async function initRepoProjectSortable() {
ghostClass: 'card-ghost', ghostClass: 'card-ghost',
onAdd: moveIssue, onAdd: moveIssue,
onUpdate: moveIssue, onUpdate: moveIssue,
delayOnTouchOnly: true,
delay: 500,
}); });
} }
} }