2026-07-01 10:45:07 -03:00
2026-07-01 09:26:45 -03:00
2026-07-01 09:26:45 -03:00
2026-07-01 10:30:07 -03:00
2026-07-01 10:30:07 -03:00
2026-07-01 10:30:07 -03:00

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.

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.

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.

Description
No description provided
Readme AGPL-3.0 102 KiB
Languages
JavaScript 53.6%
PHP 37.4%
CSS 9%