Thanks to visit codestin.com
Credit goes to github.com

Skip to content

new public prepareDragDrop(el) #2965

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 27, 2025
Merged

new public prepareDragDrop(el) #2965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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...
Expand Down
22 changes: 11 additions & 11 deletions src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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(); }
Expand Down Expand Up @@ -1367,7 +1367,7 @@ export class GridStack {
this._writeAttr(el, n);
}
if (ddChanged) {
this._prepareDragDropByNode(n);
this.prepareDragDrop(n.el);
}
});

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
3 changes: 1 addition & 2 deletions src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down