beco/TweakDrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drag autoscroll: add vertical (page) scroll + percentage edge zones (15%, 30-160px); v1.2

Browse Source
This commit is contained in:
Ruben Carlo Benante
2026-07-06 20:25:02 -03:00
parent 8760377927
commit fe577a674c
4 changed files with 94 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@@ -10,7 +10,9 @@ A Kanboard plugin that groups board dragging and spacing tweaks, configurable un
- **Mobile drag handle size** -- enlarge the card drag handle Kanboard shows on mobile so
it is easy to grab with a finger.
- **Drag auto-scroll** -- while dragging a card, the board scrolls when the pointer nears a
screen edge, so you can reach a column that is off screen (desktop and mobile).
screen edge, so you can reach a column or row that is off screen. Horizontal scrolls the
board; vertical scrolls the page (when the vertical-collapse view is off). Works on
desktop and mobile.
These options were originally part of the ShrinkVertically plugin and moved here so that
drag/touch behaviour can grow on its own (planned: mobile drag-to-move cards, and a drag
@@ -34,10 +36,13 @@ movement threshold so ending a drag does not open the task) without bloating tha
keeps the handle hidden.
- **Drag auto-scroll**: a script (`Asset/js/drag-autoscroll.js`) listens for jQuery UI
sortable's `sortstart`/`sortstop` (which also fire on touch via Kanboard's bundled Touch
Punch) and, while a card drag is active, scrolls `#board-container` when the pointer nears
its left/right edge. Speed ramps up smoothly toward the edge. After each scroll step it
dispatches a synthetic `mousemove` so jQuery UI moves the drop placeholder onto the newly
revealed column. It only acts during an active drag, so it is idle otherwise.
Punch) and, while a card drag is active, scrolls toward whichever edge the pointer nears:
the board (`#board-container`) horizontally, and the window/page vertically (for the
collapse-off view; a no-op when the page does not scroll). Speed ramps up smoothly toward
the edge. The edge zone is 15% of each axis, clamped to 30-160px, so it adapts to screen
size and orientation. After each scroll step it dispatches a synthetic `mousemove` so
jQuery UI moves the drop placeholder onto the newly revealed area. It only acts during an
active drag, so it is idle otherwise.
## Requirements