prepareDragDrop(el, force)

adumesny · adumesny · commit 96d90ff158d2 · 2025-03-02T15:16:23.000-08:00
* added option to force re-creation of the drag&amp;drop event binding
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [11.4.0-dev (TBD)](#1140-dev-tbd)
 - [11.4.0 (2025-02-27)](#1140-2025-02-27)
 - [11.3.0 (2025-01-26)](#1130-2025-01-26)
 - [11.2.0 (2024-12-29)](#1120-2024-12-29)
@@ -121,6 +122,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 11.4.0-dev (TBD)
+* feat: [#2960](https://github.com/gridstack/gridstack.js/pull/2960) `prepareDragDrop(el, force)` option to force re-creation of the drag&drop event binding
+
 ## 11.4.0 (2025-02-27)
 * fix: [#2921](https://github.com/gridstack/gridstack.js/pull/2921) replace initMouseEvent with MouseEvent constructor and added composed: true
 * fix: [#2939](https://github.com/gridstack/gridstack.js/issues/2939) custom drag handle not working with LazyLoad
diff --git a/doc/README.md b/doc/README.md
@@ -25,6 +25,7 @@ gridstack.js API
   - [resizestart(event, el)](#resizestartevent-el)
   - [resize(event, el)](#resizeevent-el)
   - [resizestop(event, el)](#resizestopevent-el)
+  - [prepareDragDrop(el: GridItemHTMLElement, force = false) : GridStack](#preparedragdropel-griditemhtmlelement-force--false--gridstack)
 - [API Global (static)](#api-global-static)
   - [`init(options: GridStackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack`](#initoptions-gridstackoptions---elorstring-gridstackelement--grid-stack-gridstack)
   - [`initAll(options: GridStackOptions = {}, selector = '.grid-stack'): GridStack[]`](#initalloptions-gridstackoptions---selector--grid-stack-gridstack)
@@ -307,6 +308,11 @@ grid.on('resizestop', function(event: Event, el: GridItemHTMLElement) {
 });
 ```
 
+### prepareDragDrop(el: GridItemHTMLElement, force = false) : GridStack
+prepares the element for drag&drop - this is normally called by makeWiget() unless are are delay loading
+* @param el GridItemHTMLElement of the widget
+* @param [force=false] 
+
 
 ## API Global (static)
 
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -2409,20 +2409,25 @@ export class GridStack {
     return this;
   }
 
-  /** prepares the element for drag&drop - this is normally called by makeWiget() unless are are delay loading */
-  public prepareDragDrop(el: GridItemHTMLElement): GridStack {
+  /**
+   * prepares the element for drag&drop - this is normally called by makeWiget() unless are are delay loading
+   * @param el GridItemHTMLElement of the widget
+   * @param [force=false] 
+   * */
+  public prepareDragDrop(el: GridItemHTMLElement, force = false): GridStack {
     const node = el.gridstackNode;
     const noMove = node.noMove || this.opts.disableDrag;
     const noResize = node.noResize || this.opts.disableResize;
 
     // check for disabled grid first
-    if (this.opts.staticGrid || (noMove && noResize)) {
+    const disable = this.opts.staticGrid || (noMove && noResize);
+    if (force || disable) {
       if (node._initDD) {
         this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
         delete node._initDD;
       }
-      el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
-      return this;
+      if (disable) el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
+      if (!force) return this;
     }
 
     if (!node._initDD) {
