TweakDrag/README.md

TweakDrag -- board drag, touch and column-gap tweaks

A Kanboard plugin that groups board dragging and spacing tweaks, configurable under "Settings -> Tweak Drag":

• Drag the board background to scroll (desktop) -- click and drag on the empty board background to scroll the columns sideways, like the Trello board canvas.
• Widen the gap between columns -- spread the columns further apart, easier to tell apart and to touch.
• 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 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 movement threshold so ending a drag does not open the task) without bloating that plugin.

How it works

• Drag to scroll: a small script (Asset/js/drag-scroll.js, loaded only when the option is on) starts a horizontal pan on #board-container only when the press lands on empty background -- pressing a task card, a drag handle or any control is ignored, so Kanboard's own card and column drag-and-drop keep working unchanged.
• Column gap: the board is a table, so the gap is set with border-spacing (injected in the page head from Template/layout/variable.php only when the option is on), sized by the --td-column-gap CSS variable. This spreads the columns without shrinking the cards and keeps each column header aligned with its list. It also adds some spacing at the left and right edges of the board.
• Mobile drag handle size: Kanboard already supports dragging cards on mobile, but only via a small handle (a FontAwesome fa-arrows-alt glyph it reveals on touch devices) that is hard to grab. FontAwesome icons are sized by font-size, so a single rule scales the handle from the --td-handle-size CSS variable. It is inert on desktop, where Kanboard 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 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

• Kanboard >= 1.2.0

Installation

Copy this folder into your Kanboard installation as plugins/TweakDrag/. The directory name must be exactly TweakDrag (Kanboard derives the plugin namespace from the folder name). No build step and no database migration.

Settings

These settings are global (per Kanboard instance) and admin-only. Go to "Settings -> Tweak Drag":

• Column gap in pixels -- width of the column gap (--td-column-gap). Default: 25.
• Widen the gap between columns -- toggles the wider gap. Default: on.
• Drag the board background to scroll horizontally -- toggles the Trello-style click-and-drag panning. Desktop (mouse) for now. Default: on.
• Mobile drag handle size in pixels -- size of the mobile card drag handle (--td-handle-size). No effect on desktop. Default: 20.

License

AGPL-3.0. See LICENSE.

More Kanboard plugins by Dr. Beco

All free and AGPL-3.0, at code.beco.cc:

• RecoReco -- calendar-scheduled recurring cards (yearly, monthly, weekly, daily), driven by the card due date.
• FinanceBuddy -- attach a money value (debit/credit and installments) to cards, shown on the card and totalled per column.
• QualKard -- flashcard spaced repetition: grade a card by dragging it to a column, and it comes back when due (needs RecoReco).
• WorkspaceOrg -- group your projects into personal per-user workspaces, shown on a "My workspaces" dashboard page with a badge on each project.
• OrganonTweaks -- an umbrella of small quality-of-life board tweaks: remove an empty column, always show the comment icon, emphasize due dates, extra search keywords and shared board filters, and more.
• BulkMoveTasks -- move every task from one board column to another in a single action.
• ShrinkVertically -- shrink vertically-collapsed board columns so the horizontal scrollbar stays within reach.