diff --git a/demo/nested.html b/demo/nested.html
index 086366e25..28b1a40e5 100644
--- a/demo/nested.html
+++ b/demo/nested.html
@@ -12,6 +12,8 @@
/* make nested grids have slightly darker bg */
.grid-stack.grid-stack-nested {
background: #e4e4c1;
+ border: 2px dashed rgba(0, 0, 0, 0.4);
+ box-sizing: border-box;
}
/* make nested grid take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
.grid-stack > .grid-stack-item.grid-stack-nested > .grid-stack-item-content {
@@ -26,6 +28,9 @@
min-height: 100%;
min-width: 100%;
}
+ .grid-stack-item > .grid-stack-item-content {
+ inset: 5px !important;
+ }
@@ -69,8 +74,8 @@ Nested grids demo
id: 'main',
children: [
{y:0, content: 'regular item'},
- {x:1, w:4, h:4, subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}},
- {x:5, w:3, h:4, subGrid: {children: sub2, class: 'sub2', ...subOptions}},
+ {x:1, w:4, h:8, subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}},
+ {x:5, w:3, h:3, subGrid: {children: sub2, class: 'sub2', ...subOptions}},
]
};
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
index 9f08fcdff..0e5828717 100644
--- a/src/gridstack-dd.ts
+++ b/src/gridstack-dd.ts
@@ -5,8 +5,8 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { GridStackDDI } from './gridstack-ddi';
-import { GridItemHTMLElement, GridStackNode, GridStackElement, DDUIData, DDDragInOpt, GridStackPosition } from './types';
-import { GridStack, MousePosition } from './gridstack';
+import { GridItemHTMLElement, GridStackNode, GridStackElement, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions } from './types';
+import { GridStack, GridStackWidget, MousePosition } from './gridstack';
import { Utils } from './utils';
/** Drag&Drop drop options */
@@ -131,8 +131,6 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
// 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;
- // prevent deeper nesting until rest of 992 can be fixed
- if (node?.subGrid) return false;
// check for accept method or class matching
let canAccept = true;
if (typeof this.opts.acceptWidgets === 'function') {
@@ -267,16 +265,25 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
GridStackDD.get().remove(el);
}
if (!wasAdded) return false;
+
el.gridstackNode = node;
node.el = el;
- // @ts-ignore
- Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
- Utils.removePositioningStyles(el);// @ts-ignore
+ // placeholder values as moving VERY fast can throw things off #1578
+ Utils.copyPos(node, this._readAttr(this.placeholder));
+ Utils.removePositioningStyles(el);
this._writeAttr(el, node);
- this.el.appendChild(el);// @ts-ignore
+ this.el.appendChild(el);
this._updateContainerHeight();
- this.engine.addedNodes.push(node);// @ts-ignore
- this._triggerAddEvent();// @ts-ignore
+
+ // if dropping a subgrid, make sure to update its style #1943
+ const subgrid = node.subGrid as GridStack;
+ if (subgrid) {
+ subgrid._updateStyles(true, subgrid.getRow());
+ }
+
+ this.engine.addedNodes.push(node);
+
+ this._triggerAddEvent();
this._triggerChangeEvent();
this.engine.endUpdate();