From a8b6b7cad5551a8e69703e9ff9a8768faa276d10 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Sat, 9 Aug 2025 19:35:02 -0700
Subject: [PATCH] added `.grid-stack-dragging` to grid when child is being
 dragged

* fix #3047
* added `.grid-stack-dragging` to grid when child is being dragged so we can set cursor:grabbing, updated demo.
---
 demo/demo.css       | 5 ++++-
 doc/CHANGES.md      | 1 +
 src/dd-draggable.ts | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/demo/demo.css b/demo/demo.css
index 27f7aa2de..d1ed5d944 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -56,13 +56,16 @@ h1 {
 
 .card-header {
   margin: 0;
-  cursor: move;
+  cursor: grab;
   min-height: 25px;
   background-color: #16af91;
 }
 .card-header:hover {
   background-color: #149b80;
 }
+.grid-stack-dragging {
+  cursor: grabbing;
+}
 
 .ui-draggable-disabled.ui-resizable-disabled > .grid-stack-item-content {
   background-color: #777;
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 6b34e8aed..85346dcc1 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -134,6 +134,7 @@ Change log
 ## 12.2.2-dev (TBD)
 * fix: [#3099](https://github.com/gridstack/gridstack.js/issues/3099) scroll take into account ScrollContainer position
 * fix: [#3102](https://github.com/gridstack/gridstack.js/pull/3102) React demo now support multiple grids
+* fix: [#3047](https://github.com/gridstack/gridstack.js/issues/3047) added `.grid-stack-dragging` to grid when child is being dragged so we can set cursor:grabbing, updated demo.
 
 ## 12.2.2 (2025-07-06)
 * fix: [#3070](https://github.com/gridstack/gridstack.js/pull/3070) incorrect property name 'sizeToContent' when cleaning up invalid attributes
diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts
index c1f183163..f0d3c78e9 100644
--- a/src/dd-draggable.ts
+++ b/src/dd-draggable.ts
@@ -309,6 +309,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal set the fix position of the dragged item */
   protected _setupHelperStyle(e: DragEvent): DDDraggable {
     this.helper.classList.add('ui-draggable-dragging');
+    this.el.gridstackNode?.grid?.el.classList.add('grid-stack-dragging');
     // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
     const style = this.helper.style;
     style.pointerEvents = 'none'; // needed for over items to get enter/leave
@@ -330,6 +331,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal restore back the original style before dragging */
   protected _removeHelperStyle(): DDDraggable {
     this.helper.classList.remove('ui-draggable-dragging');
+    this.el.gridstackNode?.grid?.el.classList.remove('grid-stack-dragging');
     const node = (this.helper as GridItemHTMLElement)?.gridstackNode;
     // don't bother restoring styles if we're gonna remove anyway...
     if (!node?._isAboutToRemove && this.dragElementOriginStyle) {