new public prepareDragDrop(el)

adumesny · adumesny · commit a2e65b067823 · 2025-02-26T18:50:58.000-08:00
* internal `_prepareDragDropByNode(n)` is now public as `prepareDragDrop(el)` so Angular, React, and others can call once the DOM content elements have been added (the outside griditem divs are always created for content)
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -127,6 +127,7 @@ Change log
 * fix: [#2955](https://github.com/gridstack/gridstack.js/issues/2955) angular circular dependency
 * fix: [#2951](https://github.com/gridstack/gridstack.js/issues/2951) shadow DOM dragging re-appending fix
 * fix: [#2964](https://github.com/gridstack/gridstack.js/pull/2964) minW larger than column fix
+* feat: [#2965](https://github.com/gridstack/gridstack.js/pull/2965) internal `_prepareDragDropByNode(n)` is now public as `prepareDragDrop(el)` so Angular, React, and others can call once the DOM content elements have been added (the outside griditem divs are always created for content)
 
 ## 11.3.0 (2025-01-26)
 * feat: added `isIgnoreChangeCB()` if changeCB should be ignored due to column change, sizeToContent, loading, etc...
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -551,7 +551,7 @@ export class GridStack {
         newItem.appendChild(content);
         content = Utils.createDiv(['grid-stack-item-content'], node.el);
       }
-      this._prepareDragDropByNode(node); // ... and restore original D&D
+      this.prepareDragDrop(node.el); // ... and restore original D&D
     }
 
     // if we're adding an additional item, make the container large enough to have them both
@@ -1278,7 +1278,7 @@ export class GridStack {
     this._setupRemoveDrop();
     this._setupAcceptWidget();
     this.engine.nodes.forEach(n => {
-      this._prepareDragDropByNode(n); // either delete or init Drag&drop
+      this.prepareDragDrop(n.el); // either delete or init Drag&drop
       if (n.subGrid && recurse) n.subGrid.setStatic(val, updateClass, recurse);
     });
     if (updateClass) { this._setStaticClass(); }
@@ -1367,7 +1367,7 @@ export class GridStack {
         this._writeAttr(el, n);
       }
       if (ddChanged) {
-        this._prepareDragDropByNode(n);
+        this.prepareDragDrop(n.el);
       }
     });
 
@@ -1697,7 +1697,7 @@ export class GridStack {
     sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');
     if (sizeToContent) this.resizeToContentCheck(false, node);
 
-    if (!Utils.lazyLoad(node)) this._prepareDragDropByNode(node);
+    if (!Utils.lazyLoad(node)) this.prepareDragDrop(node.el);
 
     return this;
   }
@@ -1994,7 +1994,7 @@ export class GridStack {
       const n = el.gridstackNode;
       if (!n) return;
       val ? delete n.noMove : n.noMove = true;
-      this._prepareDragDropByNode(n); // init DD if need be, and adjust
+      this.prepareDragDrop(n.el); // init DD if need be, and adjust
     });
     return this;
   }
@@ -2010,7 +2010,7 @@ export class GridStack {
       const n = el.gridstackNode;
       if (!n) return;
       val ? delete n.noResize : n.noResize = true;
-      this._prepareDragDropByNode(n); // init DD if need be, and adjust
+      this.prepareDragDrop(n.el); // init DD if need be, and adjust
     });
     return this;
   }
@@ -2057,7 +2057,7 @@ export class GridStack {
     if (this.opts.staticGrid) return this; // can't move a static grid!
     doEnable ? delete this.opts.disableDrag : this.opts.disableDrag = true; // FIRST before we update children as grid overrides #1658
     this.engine.nodes.forEach(n => {
-      this._prepareDragDropByNode(n);
+      this.prepareDragDrop(n.el);
       if (n.subGrid && recurse) n.subGrid.enableMove(doEnable, recurse);
     });
     return this;
@@ -2071,7 +2071,7 @@ export class GridStack {
     if (this.opts.staticGrid) return this; // can't size a static grid!
     doEnable ? delete this.opts.disableResize : this.opts.disableResize = true; // FIRST before we update children as grid overrides #1658
     this.engine.nodes.forEach(n => {
-      this._prepareDragDropByNode(n);
+      this.prepareDragDrop(n.el);
       if (n.subGrid && recurse) n.subGrid.enableResize(doEnable, recurse);
     });
     return this;
@@ -2399,9 +2399,9 @@ export class GridStack {
     return this;
   }
 
-  /** @internal prepares the element for drag&drop */
-  protected _prepareDragDropByNode(node: GridStackNode): GridStack {
-    const el = node.el;
+  /** prepares the element for drag&drop - this is normally called by makeWiget() unless are are delay loading */
+  public prepareDragDrop(el: GridItemHTMLElement): GridStack {
+    const node = el.gridstackNode;
     const noMove = node.noMove || this.opts.disableDrag;
     const noResize = node.noResize || this.opts.disableResize;
 
diff --git a/src/types.ts b/src/types.ts
@@ -153,7 +153,7 @@ export interface GridStackOptions {
 
   /** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns.
    * Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside
-   * items always to same. flag is not supported for regular non-nested grids.
+   * items always the same. flag is NOT supported for regular non-nested grids.
    */
   column?: number | 'auto';
 
diff --git a/src/utils.ts b/src/utils.ts
@@ -126,8 +126,7 @@ export class Utils {
           n.visibleObservable?.disconnect();
           delete n.visibleObservable;
           GridStack.renderCB(cont, n);
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (n.grid as any)?._prepareDragDropByNode(n); // access protected method. TODO: do we expose that for React to call too (after dom is ready)
+          n.grid?.prepareDragDrop(n.el);
         }});
         window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes
       }
