-
Two grids demo
-
Two grids, one floating one not, showing drag&drop from sidebar and between grids.
+
Two grids demo, with scroll containers
+
Two grids, one floating one not, showing drag&drop from sidebar and between grids. Using scoll containers to test.
New v10.2: use 'Esc' to cancel any move/resize. Use 'r' to rotate as you drag.
@@ -51,11 +58,14 @@
Two grids demo
@@ -68,7 +78,7 @@
Two grids demo
{x: 1, y: 1}, // intentional overlap to test collision on load
{x: 3, y: 1},
{x: 2, y: 3, w: 3, maxW: 3, content: 'has maxW=3'},
- {x: 2, y: 5}
+ {x: 2, y: 5, h:20}
];
items.forEach((item, i) => item.content = item.content || String(i));
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 8eb8af372..1c0339481 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -139,7 +139,7 @@ Change log
## 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
-* fix: [#2188](https://github.com/gridstack/gridstack.js/issues/2188) scroll speed too high
+* fix: [#2188](https://github.com/gridstack/gridstack.js/issues/2188), [#2074](https://github.com/gridstack/gridstack.js/issues/2074) scroll speed too high, not animating, not using container parent
## 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)
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 6beccabee..2069b3668 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -3035,9 +3035,10 @@ export class GridStack {
return 0;
}
- /** @internal starts or continues auto-scroll when the dragged element is clipped by the scroll container */
+ /** @internal starts or continues auto-scroll when the dragged element is clipped by the scroll container.
+ * Uses the grid's own element to find the scroll container so external/sidebar drags work too (#2074). */
protected _updateScrollPosition(el: HTMLElement): void {
- const scrollEl = Utils.getScrollElement(el);
+ const scrollEl = Utils.getScrollElement(this.el);
if (!scrollEl) return;
this._autoScrollEl = el;
this._autoScrollContainer = scrollEl;
@@ -3059,12 +3060,10 @@ export class GridStack {
const clipping = this._getClipping(el, scrollEl);
if (clipping === 0) { this._stopScrolling(); return; }
- const scrollRect = scrollEl.getBoundingClientRect();
const viewportH = window.innerHeight || document.documentElement.clientHeight;
- const containerH = Math.min(scrollRect.height, viewportH);
- const maxSpeed = Math.max(containerH / 75, 2);
+ const maxSpeed = Math.max(viewportH / 75, 4);
const absPx = Math.abs(clipping);
- const speed = Math.min(absPx * 0.3, maxSpeed);
+ const speed = Math.min(absPx * 0.6, maxSpeed);
const scrollAmount = clipping > 0 ? speed : -speed;
const prevScroll = scrollEl.scrollTop;