diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index 4e26b941c..214baab13 100644 --- a/src/dd-draggable.ts +++ b/src/dd-draggable.ts @@ -461,7 +461,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt /** @internal starts or continues auto-scroll when the dragged helper is clipped by the scroll container. * Takes the grid's own element to find the scroll container so external/sidebar drags work too (#2074). */ - public updateScrollPosition(gridEl: HTMLElement): void { + public updateScrollPosition(gridEl: HTMLElement): void { this._autoScrollContainer = Utils.getScrollElement(gridEl); // always use latest active grid const clipping = this._getClipping(this.helper!, this._autoScrollContainer); if (clipping === 0) { diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts index 3488b6083..e315b5169 100644 --- a/src/dd-resizable.ts +++ b/src/dd-resizable.ts @@ -264,8 +264,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt const offsetX = event.clientX - oEvent.clientX; const offsetY = this.sizeToContent ? 0 : event.clientY - oEvent.clientY; // prevent vert resize - let moveLeft = false; - let moveUp = false; + let moveLeft = false; + let moveUp = false; const isRtl = this.option.rtl; diff --git a/src/gridstack.ts b/src/gridstack.ts index b5c9610b5..69c9cd613 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -1997,13 +1997,13 @@ export class GridStack { elStyle.width = n.w! > 1 ? `calc(${n.w} * var(--gs-column-width))` : null; elStyle.height = n.h! > 1 ? `calc(${n.h} * var(--gs-cell-height))` : null; } - + // Always inject variables for print CSS grid mapping (since attr() is not fully supported in calc) el.style.setProperty('--gs-x', String(n.x || 0)); el.style.setProperty('--gs-y', String(n.y || 0)); el.style.setProperty('--gs-w', String(n.w || 1)); el.style.setProperty('--gs-h', String(n.h || 1)); - + // NOTE: those are technically not needed anymore (v12+) as we have CSS vars for everything, but some users depends on them to render item size using CSS // ALways write x,y otherwise it could be autoPositioned incorrectly #3181 el.setAttribute('gs-x', String(n.x ?? 0)); @@ -2059,7 +2059,7 @@ export class GridStack { n.noResize = Utils.toBool(el.getAttribute('gs-no-resize')); n.noMove = Utils.toBool(el.getAttribute('gs-no-move')); n.locked = Utils.toBool(el.getAttribute('gs-locked')); - + let pageBreak = el.getAttribute('gs-page-break'); let hide = el.classList.contains('gs-print-hide'); let orientation = el.getAttribute('gs-print-orientation') as 'portrait' | 'landscape'; @@ -3084,12 +3084,26 @@ export class GridStack { // 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 if (event.hasMovedX) { - const left = ui.position!.left + mLeft; - p.x = Math.round(left / cellWidth); + // Set the X based on already calculated p width and node properties. + if (node.x != undefined && p.w != undefined && node.w != undefined) { + const calcPX = node.x - (p.w - node.w); + p.x = calcPX < 0 ? 0 : calcPX; + } + else { + const left = ui.position!.left + mLeft; + p.x = Math.round(left / cellWidth); + } } if (event.hasMovedY) { - const top = ui.position!.top + mTop; - p.y = Math.round(top / cellHeight); + // Set the Y based on already calculated p height and node properties. + if (node.y != undefined && p.h != undefined && node.h != undefined) { + const calcPY = node.y - (p.h - node.h); + p.y = calcPY < 0 ? 0 : calcPY; + } + else { + const top = ui.position!.top + mTop; + p.y = Math.round(top / cellHeight); + } } resizing = true;