Problem

During resize events, _dragOrResize unconditionally recalculates x and y from pixel positions for all resize handle directions. For SE/S/E handles, the top-left corner is anchored and should never move. The pixel → grid round-trip through Math.round() introduces rounding errors that cause position drift.

History

This was introduced in commit a13fad9 (April 18, 2021, v4.2.1) — "fix sizing from top/left" (#1728, #1731). The previous code only handled left-side resizing with a targeted comparison. The fix replaced it with an unconditional Math.round(left / cellWidth) and Math.round(top / cellHeight) for all handles — correctly fixing N/W resize but introducing a rounding drift regression for SE/S/E handles.

Root Cause

// gridstack.ts, _dragOrResize, resize branch:
// if we size on left/top side this might move us, so get possible new position as well
const left = ui.position.left + mLeft;
const top = ui.position.top + mTop;
p.x = Math.round(left / cellWidth);   // ← recalculates x always
p.y = Math.round(top / cellHeight);   // ← recalculates y always

The comment is correct — this is needed for N/W/NW/NE/SW handles. But for SE/S/E handles the top-left is anchored and should remain node._orig.x / node._orig.y.

Why it drifts

The pixel → grid → pixel round-trip is lossy:

Original: y = 100, cellHeight = 3.526px
Pixel: 100 × 3.526 = 352.6px
Browser renders: ~355.0px (sub-pixel variation)
Back to grid: Math.round(355.0 / 3.526) = Math.round(100.68) = 101 ← DRIFTED

This is visible on any grid where cellHeight or cellWidth is small enough for Math.round() to tip over — not just extreme fine grids. Fractional cellHeight from vh/rem units also triggers it on standard column counts.

Reproduction

const grid = GridStack.init({
  column: 480,
  cellHeight: '0.38vh',  // ~3.5px per cell
  float: true,
  minRow: 240,
  maxRow: 240,
  resizable: { handles: 'se' }
});
grid.addWidget({ x: 100, y: 100, w: 50, h: 30 });
// Resize using SE handle → widget y drifts from 100 to 101 or 99

Fix

Two small changes:

1. dd-resizable.ts: Expose the resize handle direction by attaching resizeDir to the synthesized event in _resizing()
2. gridstack.ts: In _dragOrResize, only recalculate x/y when the handle actually moves the top-left corner (direction contains 'n' or 'w'). For SE/S/E handles, p already has the correct values from { ...node._orig }.

Testing

• Fine grid (480 columns, cellHeight: '0.38vh'): SE resize no longer drifts position
• Standard grid (12 columns): No behavior change
• NW/N/W resize: Position still updates correctly
• No new test failures (33 pre-existing failures in master, none added)

Related Issues

• When resizing direction north changing Y-axis is not working anymore [with movie] #1728 / Resizing horizontally stretches intro wrong direction #1731 — The original commit (a13fad9) that introduced the unconditional recalculation
• Widget vertical jumping after dragging beyond grid limit and then resizing #385 — Widget vertical jumping after resize
• float: true pushes widgets down before releasing moved/resized widget #811 — Float pushes widgets down during resize
• "cellHeight=8rem" breaks during resize in 2.0.0 #1356 — cellHeight with rem units breaks resize