Merge pull request #3419 from adumesny/master

item not moved (to alt position) when colliding fails with an object

Author: adumesny

doc/CHANGES.md

@@ -150,6 +150,8 @@ Change log
 
 ## 14.0.1 (TBD)
 * fix: [#2666](https://github.com/gridstack/gridstack.js/issues/2666) iOS auto-scroll uses visualViewport, and un-bind touch handlers
+* fix: [#3418](https://github.com/gridstack/gridstack.js/pull/3418) preserve saved layout after cancelling a cross-grid drag- #3418 - thank you [sameerdeolalikar](https://github.com/sameerdeolalikar)
+* fix: [#2819](https://github.com/gridstack/gridstack.js/issues/2819) item not moved (to alt position) when colliding fails with an object
 
 ## 14.0.0 (2026-09-20)
 * feat: [#754](https://github.com/gridstack/gridstack.js/issues/754), [#2866](https://github.com/gridstack/gridstack.js/issues/2866) new `mode?: 'top' | 'float' | 'list' | 'compact'` - items are continuously re-flowed in sequential (row-major) order, like a re-orderable list: dragging, resizing, adding or removing an item re-flows everyone else instead of pushing them down, and dropping an item on another takes its place. See new

spec/regression-spec.ts

@@ -715,4 +715,69 @@ describe('regression >', () => {
       expect(mouseDown(action)).toBe(false); // must NOT start a drag
     });
   });
+
+  describe('2819 diagonal drag stuck on a tall neighbour it barely grazes >', () => {
+    const CH = 50, CW = 50;
+    beforeEach(() => {
+      document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+    });
+    afterEach(() => {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+
+    // reporter's video: dragging mostly sideways, with a small amount of vertical mouse creep,
+    // froze completely against a tall neighbour instead of continuing to slide horizontally -
+    // even though the row the item started on was completely free the whole way across.
+    it('still slides sideways when the vertical component fails 50% coverage', () => {
+      grid = GridStack.init({column: 12, cellHeight: CH, mode: 'float', children: [
+        {id: 'move', x: 5, y: 0, w: 2, h: 1},
+        {id: 'big', x: 0, y: 1, w: 2, h: 6},
+      ]});
+      const move = grid.engine.nodes.find(n => n.id === 'move')!;
+      const big = grid.engine.nodes.find(n => n.id === 'big')!;
+
+      grid.engine.cleanNodes().beginUpdate(move);
+      move._moving = true;
+      grid.engine.cacheRects(CW, CH, 0, 0, 0, 0);
+
+      // dx=-4 (mostly horizontal), dy=1 (a sliver dipping into 'big' row) - only 1 of 6 rows of
+      // overlap (~17%), nowhere near the 50% needed to push 'big' out of the way
+      grid.engine.moveNodeCheck(move, {x: 1, y: 1, w: 2, h: 1, cellWidth: CW, cellHeight: CH,
+        rect: {x: 1 * CW, y: 1 * CH, w: 2 * CW, h: 1 * CH}});
+
+      expect(big.y).toBe(1); // untouched, correctly - coverage really is too small to push it
+      expect(move.y).toBe(0); // stayed on its original free row...
+      expect(move.x).toBe(1); // ...but still allowed to slide over sideways, not stuck at x=5
+      grid.engine.endUpdate();
+    });
+
+    it('does not slide sideways into something actually blocking that row', () => {
+      grid = GridStack.init({column: 12, cellHeight: CH, mode: 'float', children: [
+        {id: 'move', x: 5, y: 0, w: 2, h: 1},
+        {id: 'big', x: 0, y: 1, w: 2, h: 6},
+        {id: 'blocker', x: 1, y: 0, w: 2, h: 1},
+      ]});
+      const move = grid.engine.nodes.find(n => n.id === 'move')!;
+
+      grid.engine.cleanNodes().beginUpdate(move);
+      move._moving = true;
+      grid.engine.cacheRects(CW, CH, 0, 0, 0, 0);
+
+      grid.engine.moveNodeCheck(move, {x: 1, y: 1, w: 2, h: 1, cellWidth: CW, cellHeight: CH,
+        rect: {x: 1 * CW, y: 1 * CH, w: 2 * CW, h: 1 * CH}});
+
+      // the horizontal-only fallback still engaged (not frozen at its starting spot)...
+      expect(move.x === 5 && move.y === 0).toBe(false);
+      // ...but went through the normal collision/push logic rather than teleporting onto 'blocker'
+      const ns = grid.engine.nodes;
+      for (let i = 0; i < ns.length; i++) {
+        for (let j = i + 1; j < ns.length; j++) {
+          const a = ns[i], b = ns[j];
+          const overlap = a.x! < b.x! + b.w! && b.x! < a.x! + a.w! && a.y! < b.y! + b.h! && b.y! < a.y! + a.h!;
+          expect(overlap).toBe(false);
+        }
+      }
+      grid.engine.endUpdate();
+    });
+  });
 });

src/gridstack-engine.ts

@@ -1039,13 +1039,30 @@ export class GridStackEngine {
         // check to make sure we actually collided over 50% surface area while dragging
         let collide = activeDrag ? this.directionCollideCoverage(node, o, collides) : collides[0];
         // if we're enabling creation of sub-grids on the fly, see if we're covering 80% of either one, if we didn't already do that
-        if (activeDrag && this._makeDynamicSubGrid(node, o, collide)) collide = undefined;
+        const madeSubGrid = activeDrag && this._makeDynamicSubGrid(node, o, collide);
+        if (madeSubGrid) collide = undefined;
 
         if (collide) {
           needToMove = !this._fixCollisions(node, nn, collide, o); // check if already moved...
         } else {
           needToMove = false; // we didn't cover >50% for a move, skip...
           if (wasUndefinedPack) delete o.pack;
+
+          // #2819 a diagonal drag can fail coverage purely because of the axis we're only grazing
+          // (ex: a sliver of vertical overlap against a much taller neighbor below), even though the
+          // axis we're actually traveling along is completely clear. Retry with the other, barely-
+          // moving axis locked back to its current value so the drag can keep sliding along the
+          // dominant direction instead of freezing solid until 50% coverage is met.
+          if (!madeSubGrid && activeDrag && nn.x !== node.x && nn.y !== node.y) {
+            const horizontal = Math.abs(nn.x! - node.x!) >= Math.abs(nn.y! - node.y!);
+            const nnAxis: GridStackNode = horizontal ? {...nn, y: node.y} : {...nn, x: node.x};
+            const collidesAxis = this.collideAll(node, nnAxis, o.skip);
+            const collideAxis = collidesAxis.length ? this.directionCollideCoverage(node, o, collidesAxis) : undefined;
+            if (!collidesAxis.length || collideAxis) {
+              needToMove = collidesAxis.length ? !this._fixCollisions(node, nnAxis, collideAxis, o) : true;
+              if (needToMove) Utils.copyPos(nn, nnAxis);
+            }
+          }
         }
       }