removed dropped event setTimeout()

* better fix gridstack#2489
* removed the timeout in the  dropped event handler and call dropped event last
* tested two.hml and seems to work - can't recall wy we set event handler on a timeout (might have been pre mouse handler code)

Author: adumesny

demo/events.js

@@ -15,22 +15,22 @@ function addEvents(grid, id) {
     console.log(g + 'disable');
   })
   .on('dragstart', function(event, el) {
-    let node = el.gridstackNode;
+    let n = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
-    console.log(g + 'dragstart ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
+    console.log(g + 'dragstart ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
   })
   .on('drag', function(event, el) {
-    let node = el.gridstackNode;
+    let n = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
-    // console.log(g + 'drag ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
+    // console.log(g + 'drag ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
   })
   .on('dragstop', function(event, el) {
-    let node = el.gridstackNode;
+    let n = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
-    console.log(g + 'dragstop ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
+    console.log(g + 'dragstop ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
   })
   .on('dropped', function(event, previousNode, newNode) {
     if (previousNode) {
@@ -43,17 +43,17 @@ function addEvents(grid, id) {
   .on('resizestart', function(event, el) {
     let n = el.gridstackNode;
     let rec = el.getBoundingClientRect();
-    console.log(`${g} resizestart ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
+    console.log(`${g} resizestart ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
 
   })
   .on('resize', function(event, el) {
     let n = el.gridstackNode;
     let rec = el.getBoundingClientRect();
-    console.log(`${g} resize ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
+    console.log(`${g} resize ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
   })
   .on('resizestop', function(event, el) {
     let n = el.gridstackNode;
     let rec = el.getBoundingClientRect();
-    console.log(`${g} resizestop ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
+    console.log(`${g} resizestop ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
   });
 }

doc/CHANGES.md

@@ -105,6 +105,7 @@ Change log
 
 ## 9.4.0-dev (TBD)
 * fix [#1275](https://github.com/gridstack/gridstack.js/issues/1275) div scale support - Thank you [elmehdiamlou](https://github.com/elmehdiamlou) for implementing this teh right way (add scale to current code)
+* fix [#2489](https://github.com/gridstack/gridstack.js/commit/2489) moved the dropped event handler to after doing everything (no more setTimeout) - Thanks [arnoudb](https://github.com/arnoudb) for suggesting a fix.
 
 ## 9.4.0 (2023-10-15)
 * revert [#2263](https://github.com/gridstack/gridstack.js/issues/2263) div scale support - causing too many issues for now (#2498 #2491)

src/gridstack.ts

@@ -2134,6 +2134,7 @@ export class GridStack {
           this.engine.cleanupNode(node); // removes all internal _xyz values
           node.grid = this;
         }
+        delete node.grid._isTemp;
         dd.off(el, 'drag');
         // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)
         // as the helper will be nuked by jquery-ui otherwise. TODO: update old code path
@@ -2161,6 +2162,7 @@ export class GridStack {
           subGrid.parentGridItem = node;
           if (!subGrid.opts.styleInHead) subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
         }
+        this._prepareDragDropByNode(node);
         this._updateContainerHeight();
         this.engine.addedNodes.push(node);// @ts-ignore
         this._triggerAddEvent();// @ts-ignore
@@ -2170,18 +2172,7 @@ export class GridStack {
         if (this._gsEventHandler['dropped']) {
           this._gsEventHandler['dropped']({...event, type: 'dropped'}, origNode && origNode.grid ? origNode : undefined, node);
         }
-
-        // wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up
-        window.setTimeout(() => {
-          // IFF we are still there (some application will use as placeholder and insert their real widget instead and better call makeWidget())
-          if (node.el && node.el.parentElement) {
-            this._prepareDragDropByNode(node);
-          } else {
-            this.engine.removeNode(node);
-          }
-          delete node.grid._isTemp;
-        });
-
+        
         return false; // prevent parent from receiving msg (which may be grid as well)
       });
     return this;