Skip to content

fix to disableMove() #1551

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
Jan 2, 2021
Merged

fix to disableMove() #1551

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 @@ -47,6 +47,7 @@ Change log

- fix [1535](https://github.com/gridstack/gridstack.js/issues/1535) use batchUpdate() around grid init to make sure gs-y attributes are respected.
- fix [1540](https://github.com/gridstack/gridstack.js/issues/1540) Safari H5 drag&drop fixed
- fix [1545](https://github.com/gridstack/gridstack.js/issues/1545) `disableMove()` correctly prevents drag later (remove events and draggable attribute)

## 3.1.2 (2020-12-7)

Expand Down
57 changes: 57 additions & 0 deletions spec/e2e/html/1545_disable_move_after.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!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>disable move after</title>

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

</head>
<body>
<div class="container-fluid">
<h1>disable move/resize after #1545</h1>
<div>
<a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
<a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#">float: true</a>
</div>
<br><br>
<div class="grid-stack"></div>
</div>
<script src="../../../demo/events.js"></script>
<script type="text/javascript">
let grid = GridStack.init({float: true});
addEvents(grid);

let items = [
{x: 1, y: 1},
{x: 3, y: 0, w: 3},
{x: 4, y: 2},
{x: 3, y: 1, h: 2},
{x: 0, y: 6, w: 2, h: 2}
];
let count = 0;

addNewWidget = function() {
let n = items[count] || {
x: Math.round(12 * Math.random()),
y: Math.round(5 * Math.random()),
w: Math.round(1 + 3 * Math.random()),
h: Math.round(1 + 3 * Math.random())
};
n.content = String(count++);
grid.addWidget(n);
};

toggleFloat = function() {
grid.float(! grid.getFloat());
document.querySelector('#float').innerHTML = 'float: ' + grid.getFloat();
};
addNewWidget();
grid.enableMove(false);
grid.enableResize(false);
</script>
</body>
</html>
6 changes: 3 additions & 3 deletions src/gridstack-ddi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ export class GridStackDDI {
protected static ddi: GridStackDDI;

/** call this method to register your plugin instead of the default no-op one */
static registerPlugin(pluginClass: typeof GridStackDDI): void {
static registerPlugin(pluginClass: typeof GridStackDDI): GridStackDDI {
GridStackDDI.ddi = new pluginClass();
return GridStackDDI.ddi;
}

/** get the current registered plugin to use */
static get(): GridStackDDI {
if (!GridStackDDI.ddi) { GridStackDDI.registerPlugin(GridStackDDI); }
return GridStackDDI.ddi;
return GridStackDDI.ddi || GridStackDDI.registerPlugin(GridStackDDI);
}

/** removes any drag&drop present (called during destroy) */
Expand Down
23 changes: 11 additions & 12 deletions src/h5/dd-draggable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
this._drag = this._drag.bind(this);
this._dragEnd = this._dragEnd.bind(this);
this._dragFollow = this._dragFollow.bind(this);

this.el.draggable = true;
this.el.classList.add('ui-draggable');
this.el.addEventListener('mousedown', this._mouseDown);
this.el.addEventListener('dragstart', this._dragStart);
this.enable();
}

public on(event: 'drag' | 'dragstart' | 'dragstop', callback: (event: DragEvent) => void): void {
Expand All @@ -91,12 +87,18 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
super.enable();
this.el.draggable = true;
this.el.classList.remove('ui-draggable-disabled');
this.el.classList.add('ui-draggable');
this.el.addEventListener('mousedown', this._mouseDown);
this.el.addEventListener('dragstart', this._dragStart);
}

public disable(): void {
public disable(forDestroy = false): void {
super.disable();
this.el.draggable = false;
this.el.classList.add('ui-draggable-disabled');
this.el.removeAttribute('draggable');
this.el.classList.remove('ui-draggable');
if (!forDestroy) this.el.classList.add('ui-draggable-disabled');
this.el.removeEventListener('mousedown', this._mouseDown);
this.el.removeEventListener('dragstart', this._dragStart);
}

public destroy(): void {
Expand All @@ -106,10 +108,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
// destroyed.
this._dragEnd({} as DragEvent);
}
this.el.draggable = false;
this.el.classList.remove('ui-draggable');
this.el.removeEventListener('mousedown', this._mouseDown);
this.el.removeEventListener('dragstart', this._dragStart);
this.disable(true);
delete this.el;
delete this.helper;
delete this.option;
Expand Down
19 changes: 8 additions & 11 deletions src/h5/dd-resizable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
super();
this.el = el;
this.option = opts;

this.el.classList.add('ui-resizable');
this.enable();
this._setupAutoHide();
this._setupHandlers();
}
Expand All @@ -64,17 +63,15 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
}

public enable(): void {
if (this.disabled) {
super.enable();
this.el.classList.remove('ui-resizable-disabled');
}
super.enable();
this.el.classList.add('ui-resizable');
this.el.classList.remove('ui-resizable-disabled');
}

public disable(): void {
if (!this.disabled) {
super.disable();
this.el.classList.add('ui-resizable-disabled');
}
super.disable();
this.el.classList.add('ui-resizable-disabled');
this.el.classList.remove('ui-resizable');
}

public destroy(): void {
Expand Down Expand Up @@ -106,7 +103,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
private _setupAutoHide(): DDResizable {
if (this.option.autoHide) {
this.el.classList.add('ui-resizable-autohide');
// use mouseover/mouseout instead of mouseenter mouseleave to get better performance;
// use mouseover/mouseout instead of mouseenter/mouseleave to get better performance;
this.el.addEventListener('mouseover', this._showHandlers);
this.el.addEventListener('mouseout', this._hideHandlers);
} else {
Expand Down