Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 2 additions & 1 deletion doc/CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,9 @@ Change log
<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## 4.3.1-dev TBD
* fix [#1785](https://github.com/gridstack/gridstack.js/issue/1785) overlapping items when switching column() and making edits. Thank you [@radovanobal](https://github.com/radovanobal) for sponsoring it.
* add [#1887](https://github.com/gridstack/gridstack.js/pull/1887) support for IE (new es5 folder) by [@SmileLifeIven](https://github.com/SmileLifeIven)
* fix [#1785](https://github.com/gridstack/gridstack.js/issue/1785) overlapping items when switching column() and making edits. Thank you [@radovanobal](https://github.com/radovanobal) for sponsoring it.
* fix [#1890](https://github.com/gridstack/gridstack.js/issue/1890) unhandled exception when dragging fast between grids.

## 4.3.1 (2021-10-18)
* fix [#1868](https://github.com/gridstack/gridstack.js/issues/1868) prevent swap during resize
Expand Down
38 changes: 38 additions & 0 deletions spec/e2e/html/1858_full_grid_overlap.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!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>1858</title>

<link rel="stylesheet" href="../../../demo/demo.css"/>
<script src="../../../dist/gridstack-h5.js"></script>

</head>
<body>
<div class="container-fluid">
<h1>Full grid, drag 0 out and back in - see 1858</h1>
<div class="grid-stack"></div>
</div>
<script type="text/javascript">
options = {
disableOneColumnMode: true,
row: 15,
margin: 2,
cellHeight: 20,
acceptWidgets: true,
float: false,
};

GridStack.init(options).load([
{ x: 0, y: 0, w: 4, h: 6, content:'0' },
{ x: 0, y: 6, w: 4, h: 2, content:'1' },
{ x: 0, y: 8, w: 4, h: 2, content:'2' },
{ x: 0, y: 10, w: 4, h: 2, content:'3' },
{ x: 0, y: 12, w: 12, h: 3, content:'4' },
{ x: 4, y: 0, w: 8, h: 12, content:'5' },
])
</script>
</body>
</html>
9 changes: 5 additions & 4 deletions src/gridstack-dd.ts
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
accept: (el: GridItemHTMLElement) => {
let node: GridStackNode = el.gridstackNode;
// 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 && node.grid === this) return true;
if (node?.grid === this) return true;
if (!this.opts.acceptWidgets) return false;
// check for accept method or class matching
let canAccept = true;
Expand All @@ -152,13 +152,13 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
.on(this.el, 'dropover', (event: Event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
let node = el.gridstackNode;
// ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
if (node && node.grid === this && !node._temporaryRemoved) {
if (node?.grid === this && !node._temporaryRemoved) {
// delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)
return false; // prevent parent from receiving msg (which may be a grid as well)
}

// fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now
if (node && node.grid && node.grid !== this && !node._temporaryRemoved) {
if (node?.grid && node.grid !== this && !node._temporaryRemoved) {
// TEST console.log('dropover without leave');
let otherGrid = node.grid;
otherGrid._leave(el, helper);
Expand Down Expand Up @@ -214,6 +214,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
*/
.on(this.el, 'dropout', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
let node = el.gridstackNode;
if (!node) return false;
// fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)
// so skip this one if we're not the active grid really..
if (!node.grid || node.grid === this) {
Expand All @@ -227,7 +228,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
.on(this.el, 'drop', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
let node = el.gridstackNode;
// ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead
if (node && node.grid === this && !node._isExternal) return false;
if (node?.grid === this && !node._isExternal) return false;

let wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
this.placeholder.remove();
Expand Down
1 change: 1 addition & 0 deletions src/gridstack.ts
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,7 @@ export class GridStack {
this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) });
cbNodes.forEach(n => {
let el = n.el;
if (!el) return;
if (n._removeDOM) {
if (el) el.remove();
delete n._removeDOM;
Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ export interface GridStackWidget extends GridStackPosition {
noResize?: boolean;
/** prevents moving (default?: undefined = un-constrained) */
noMove?: boolean;
/** prevents moving and resizing (default?: undefined = un-constrained) */
/** prevents being moved by others during their (default?: undefined = un-constrained) */
locked?: boolean;
/** widgets can have their own custom resize handles. For example 'e,w' will make that particular widget only resize east and west. See `resizable: {handles: string}` option */
resizeHandles?: string;
Expand Down