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

fix background drag-scroll dying after card move; delegate to document, body marker; v1.1

Browse Source
This commit is contained in:
Ruben Carlo Benante
2026-07-06 07:52:21 -03:00
parent 7f9235dbdc
commit 8760377927
4 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Asset/css/tweak-drag.css
View File

@@ -6,16 +6,17 @@
* --td-column-gap value, so it is not in this static stylesheet. * --td-column-gap value, so it is not in this static stylesheet.
* *
* Below: click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the * Below: click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the
* "Drag the board background to scroll" setting is enabled). The .td-drag-scroll class is * "Drag the board background to scroll" setting is enabled). The .td-drag-scroll marker is
* set on #board-container by the script, so these rules are inert when disabled. A grab * set on <body> by the script (not on #board-container, which Kanboard replaces on every
* card move), so these rules are inert when disabled and survive board rebuilds. A grab
* cursor advertises the empty background; cards keep the normal cursor since pressing them * cursor advertises the empty background; cards keep the normal cursor since pressing them
* does a card drag, not a pan. * does a card drag, not a pan.
*/ */
#board-container.td-drag-scroll { body.td-drag-scroll #board-container {
cursor: grab; cursor: grab;
} }
#board-container.td-drag-scroll .task-board { body.td-drag-scroll #board-container .task-board {
cursor: default; cursor: default;
} }

38
Asset/js/drag-scroll.js
View File

@@ -6,6 +6,13 @@
* pressing a task card, a drag handle, or any interactive control is ignored, so this * pressing a task card, a drag handle, or any interactive control is ignored, so this
* never interferes with Kanboard's own card and column drag-and-drop. * never interferes with Kanboard's own card and column drag-and-drop.
* *
* Resilience note: after a card drag Kanboard rebuilds the board with
* `$("#board-container").replaceWith(data)` (BoardDragAndDrop.refresh), destroying the
* element. So we must NOT bind to #board-container directly: we listen on `document` and
* re-resolve the container on each press, and the grab-cursor marker lives on <body>
* (which is never replaced). Previously the mousedown listener and the cursor class were
* on the container, so background dragging stopped working after every card move.
*
* Loaded only when the "Drag the board background to scroll" setting is enabled. * Loaded only when the "Drag the board background to scroll" setting is enabled.
*/ */
(function () { (function () {
@@ -21,34 +28,40 @@
} }
function init() { function init() {
var container = document.getElementById("board-container"); if (!document.getElementById("board-container") || document.body.getAttribute("data-td-drag") === "1") {
if (!container || container.getAttribute("data-td-drag") === "1") {
return; return;
} }
container.setAttribute("data-td-drag", "1"); // Marker on <body> (stable) enables the grab cursor via CSS, surviving board rebuilds.
container.classList.add("td-drag-scroll"); document.body.setAttribute("data-td-drag", "1");
document.body.classList.add("td-drag-scroll");
var dragging = false; var dragging = false;
var container = null;
var startX = 0; var startX = 0;
var startScrollLeft = 0; var startScrollLeft = 0;
container.addEventListener("mousedown", function (e) { document.addEventListener("mousedown", function (e) {
// Left button only, and only on empty board background. if (e.button !== 0) {
if (e.button !== 0 || isIgnored(e.target)) {
return; return;
} }
// Re-resolve the current container and only act on its empty background.
var c = document.getElementById("board-container");
if (!c || !c.contains(e.target) || isIgnored(e.target)) {
return;
}
container = c;
dragging = true; dragging = true;
startX = e.clientX; startX = e.clientX;
startScrollLeft = container.scrollLeft; startScrollLeft = c.scrollLeft;
container.classList.add("td-grabbing"); document.body.classList.add("td-grabbing");
e.preventDefault(); e.preventDefault();
}); });
document.addEventListener("mousemove", function (e) { document.addEventListener("mousemove", function (e) {
if (!dragging) { if (!dragging || !container) {
return; return;
} }
container.scrollLeft = startScrollLeft - (e.clientX - startX); container.scrollLeft = startScrollLeft - (e.clientX - startX);
@@ -60,7 +73,8 @@
return; return;
} }
dragging = false; dragging = false;
container.classList.remove("td-grabbing"); container = null;
document.body.classList.remove("td-grabbing");
} }
document.addEventListener("mouseup", stop); document.addEventListener("mouseup", stop);

2
Plugin.php
View File

@@ -50,7 +50,7 @@ class Plugin extends Base
public function getPluginVersion() public function getPluginVersion()
{ {
return '1.0.0'; return '1.1.0';
} }
public function getPluginHomepage() public function getPluginHomepage()

2
VERSION
View File

@@ -1 +1 @@
TweakDrag v1.0 TweakDrag v1.1