Merge pull request gridstack#2645 from adumesny/master

adumesny · web-flow · commit bb7908db7e9c · 2024-03-30T13:25:37.000-07:00
Drop into full grid fix
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -113,6 +113,7 @@ Change log
 * fix: [#2503](https://github.com/gridstack/gridstack.js/issues/2503) Drag and drop a widget on top of a locked widget - Thank you [JakubEleniuk](https://github.com/JakubEleniuk)
 * fix: [#2584](https://github.com/gridstack/gridstack.js/issues/2584) wrong sort order during 1 column resize - Thank you [JakubEleniuk](https://github.com/JakubEleniuk) again.
 * fix: [#2639](https://github.com/gridstack/gridstack.js/issues/2639) load() with mix of new item without coordinates
+* fix: [#2633](https://github.com/gridstack/gridstack.js/issues/2633) Drop into full grid causes crash
 
 ## 10.1.1 (2024-03-03)
 * fix: [#2620](https://github.com/gridstack/gridstack.js/pull/2620) allow resizing with sizeToContent:NUMBER is uses 
diff --git a/spec/e2e/html/2633_drop_full_crash.html b/spec/e2e/html/2633_drop_full_crash.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>#2633 Drop into full crash</title>
+  <link rel="stylesheet" href="../../../demo/demo.css" />
+  <script src="../../../dist/gridstack-all.js"></script>
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>#2633 Drop into full crash</h1>
+    <div class="grid-stack-item" gs-w="2" gs-h="2">
+      <div class="grid-stack-item-content">2x2</div>
+    </div>
+    <br><br>
+    <div class="grid-stack"></div>
+  </div>
+  <script src="events.js"></script>
+  <script type="text/javascript">
+    var count = 0;
+    var items = [
+      {x: 0, y: 0, w: 2, h: 2},
+      {x: 2, y: 0, w: 2, h: 2},
+      {x: 4, y: 0, w: 2, h: 2},
+      {x: 6, y: 0, w: 2, h: 2},
+      {x: 8, y: 0, w: 2, h: 2},
+      {x: 10, y: 0, w: 2, h: 2},
+    ];
+    items.forEach(w => w.content = String(count++));
+
+    var options = { // put in gridstack options here
+      float: false,
+      acceptWidgets: true,
+      maxRow: 2
+    };
+    var grid = GridStack.init(options).load(items);
+
+    GridStack.setupDragIn('.grid-stack-item', { appendTo: 'body', helper: 'clone' });
+  </script>
+</body>
+</html>
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -2113,7 +2113,7 @@ export class GridStack {
 
     dd.droppable(this.el, {
       accept: (el: GridItemHTMLElement) => {
-        let node: GridStackNode = el.gridstackNode;
+        let node: GridStackNode = el.gridstackNode || this._readAttr(el, false);
         // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
         if (node?.grid === this) return true;
         if (!this.opts.acceptWidgets) return false;
@@ -2125,7 +2125,7 @@ export class GridStack {
           let selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets as string);
           canAccept = el.matches(selector);
         }
-        // finally check to make sure we actually have space left #1571
+        // finally check to make sure we actually have space left #1571 #2633
         if (canAccept && node && this.opts.maxRow) {
           let n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
           canAccept = this.engine.willItFit(n);
