more fix for #3241

* added proper type checking to #3241

Author: adumesny

doc/CHANGES.md

@@ -137,6 +137,7 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 ## 12.4.3 (TBD)
 * fix: [#3237](https://github.com/gridstack/gridstack.js/pull/3237) updateOptions() fixes for columnOpts, maxRow. load() not cloning
+* fix: [#3241](https://github.com/gridstack/gridstack.js/pull/3241) drifting rounding issue when cellHeight is small/fraction
 
 ## 12.4.2 (2025-12-26)
 * regression: [#3214](https://github.com/gridstack/gridstack.js/issues/3214) touch device with real mouse event fix (caused by #3191 in last release)

src/dd-resizable.ts

@@ -6,7 +6,7 @@
 import { DDResizableHandle } from './dd-resizable-handle';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { Utils } from './utils';
-import { DDResizeOpt, DDUIData, GridItemHTMLElement, Rect, Size } from './types';
+import { DDResizeOpt, DDUIData, GridItemHTMLElement, GridStackMouseEvent, Rect, Size } from './types';
 import { DDManager } from './dd-manager';
 
 // import { GridItemHTMLElement } from './types'; let count = 0; // TEST
@@ -183,8 +183,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     this.scrolled = this.scrollEl.scrollTop - this.scrollY;
     this.temporalRect = this._getChange(event, dir);
     this._applyChange();
-    const ev = Utils.initEvent<MouseEvent>(event, { type: 'resize', target: this.el });
-    (ev as any).resizeDir = dir; // expose handle direction so _dragOrResize can avoid position drift
+    const ev = Utils.initEvent<GridStackMouseEvent>(event, { type: 'resize', target: this.el });
+    ev.resizeDir = dir; // expose handle direction so _dragOrResize can avoid position drift
     if (this.option.resize) {
       this.option.resize(ev, this._ui());
     }

src/gridstack.ts

@@ -11,7 +11,8 @@ import {
   gridDefaults, ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,
   GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragOpt, GridStackPosition, GridStackOptions,
   GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions, GridStackMoveOpts, ResizeToContentFcn, GridStackDroppedHandler, GridStackElementHandler,
-  Position, RenderFcn
+  Position, RenderFcn,
+  GridStackMouseEvent
 } from './types';
 
 /*
@@ -2872,7 +2873,7 @@ export class GridStack {
   }
 
   /** @internal handles actual drag/resize */
-  protected _dragOrResize(el: GridItemHTMLElement, event: MouseEvent, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void {
+  protected _dragOrResize(el: GridItemHTMLElement, event: GridStackMouseEvent, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void {
     const p = { ...node._orig }; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
     let resizing: boolean;
     let mLeft = this.opts.marginLeft as number,
@@ -2931,8 +2932,8 @@ export class GridStack {
       // only recalculate position for handles that move the top-left corner (N/W).
       // for SE/S/E handles the top-left is anchored — recalculating from pixels causes
       // rounding drift on fine grids where cellWidth/cellHeight are only a few pixels. #385 #1356
-      const dir = ((event as any).resizeDir || '') as string;
-      if (dir.includes('w') || dir.includes('n')) {
+      const dir = event.resizeDir;
+      if (dir && (dir.includes('w') || dir.includes('n'))) {
         const left = ui.position.left + mLeft;
         const top = ui.position.top + mTop;
         if (dir.includes('w')) p.x = Math.round(left / cellWidth);

src/types.ts

@@ -574,3 +574,8 @@ export interface GridStackNode extends GridStackWidget {
   /** @internal had drag&drop been initialized */
   _initDD?: boolean;
 }
+
+// add custom field to support drag/resize optimizations
+export interface GridStackMouseEvent extends MouseEvent {
+  resizeDir?: string;
+}