Skip to content

removed dropped event setTimeout() #2517

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
adumesny merged 1 commit into from
Oct 22, 2023
Merged

removed dropped event setTimeout() #2517

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
18 changes: 9 additions & 9 deletions demo/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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`);
});
}
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 @@ -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)
Expand Down
15 changes: 3 additions & 12 deletions src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down