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

2026-07-06 07:52:21 -03:00
4 changed files with 33 additions and 18 deletions
--- a/Asset/css/tweak-drag.css
+++ b/Asset/css/tweak-drag.css
@@ -6,16 +6,17 @@
 * --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
- * "Drag the board background to scroll" setting is enabled). The .td-drag-scroll class is
- * set on #board-container by the script, so these rules are inert when disabled. A grab
+ * "Drag the board background to scroll" setting is enabled). The .td-drag-scroll marker is
+ * 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
 * does a card drag, not a pan.
 */
-#board-container.td-drag-scroll {
+body.td-drag-scroll #board-container {
    cursor: grab;
 }

-#board-container.td-drag-scroll .task-board {
+body.td-drag-scroll #board-container .task-board {
    cursor: default;
 }

--- a/Asset/js/drag-scroll.js
+++ b/Asset/js/drag-scroll.js
@@ -6,6 +6,13 @@
 * 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.
 *
+ * 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.
 */
 (function () {
@@ -21,34 +28,40 @@
    }

    function init() {
-        var container = document.getElementById("board-container");
-
-        if (!container || container.getAttribute("data-td-drag") === "1") {
+        if (!document.getElementById("board-container") || document.body.getAttribute("data-td-drag") === "1") {
            return;
        }

-        container.setAttribute("data-td-drag", "1");
-        container.classList.add("td-drag-scroll");
+        // Marker on <body> (stable) enables the grab cursor via CSS, surviving board rebuilds.
+        document.body.setAttribute("data-td-drag", "1");
+        document.body.classList.add("td-drag-scroll");

        var dragging = false;
+        var container = null;
        var startX = 0;
        var startScrollLeft = 0;

-        container.addEventListener("mousedown", function (e) {
-            // Left button only, and only on empty board background.
-            if (e.button !== 0 || isIgnored(e.target)) {
+        document.addEventListener("mousedown", function (e) {
+            if (e.button !== 0) {
                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;
            startX = e.clientX;
-            startScrollLeft = container.scrollLeft;
-            container.classList.add("td-grabbing");
+            startScrollLeft = c.scrollLeft;
+            document.body.classList.add("td-grabbing");
            e.preventDefault();
        });

        document.addEventListener("mousemove", function (e) {
-            if (!dragging) {
+            if (!dragging || !container) {
                return;
            }
            container.scrollLeft = startScrollLeft - (e.clientX - startX);
@@ -60,7 +73,8 @@
                return;
            }
            dragging = false;
-            container.classList.remove("td-grabbing");
+            container = null;
+            document.body.classList.remove("td-grabbing");
        }

        document.addEventListener("mouseup", stop);
--- a/Plugin.php
+++ b/Plugin.php
@@ -50,7 +50,7 @@ class Plugin extends Base

    public function getPluginVersion()
    {
-        return '1.0.0';
+        return '1.1.0';
    }

    public function getPluginHomepage()
--- a/2
+++ b/2
@@ -1 +1 @@
-TweakDrag v1.0
+TweakDrag v1.1