Skip to content

Commit 471036c

Browse files
adumesnyadumesny
authored
Merge pull request #1551 from adumesny/develop
fix to disableMove()
2 parents 61235de + d53af5c commit 471036c

File tree

5 files changed

+80
-26
lines changed

5 files changed

+80
-26
lines changed

‎doc/CHANGES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ Change log
4747

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

5152
## 3.1.2 (2020-12-7)
5253

‎spec/e2e/html/1545_disable_move_after.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>disable move after</title>
8+
9+
<link rel="stylesheet" href="../../../demo/demo.css"/>
10+
<script src="../../../dist/gridstack-h5.js"></script>
11+
12+
</head>
13+
<body>
14+
<div class="container-fluid">
15+
<h1>disable move/resize after #1545</h1>
16+
<div>
17+
<a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
18+
<a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#">float: true</a>
19+
</div>
20+
<br><br>
21+
<div class="grid-stack"></div>
22+
</div>
23+
<script src="../../../demo/events.js"></script>
24+
<script type="text/javascript">
25+
let grid = GridStack.init({float: true});
26+
addEvents(grid);
27+
28+
let items = [
29+
{x: 1, y: 1},
30+
{x: 3, y: 0, w: 3},
31+
{x: 4, y: 2},
32+
{x: 3, y: 1, h: 2},
33+
{x: 0, y: 6, w: 2, h: 2}
34+
];
35+
let count = 0;
36+
37+
addNewWidget = function() {
38+
let n = items[count] || {
39+
x: Math.round(12 * Math.random()),
40+
y: Math.round(5 * Math.random()),
41+
w: Math.round(1 + 3 * Math.random()),
42+
h: Math.round(1 + 3 * Math.random())
43+
};
44+
n.content = String(count++);
45+
grid.addWidget(n);
46+
};
47+
48+
toggleFloat = function() {
49+
grid.float(! grid.getFloat());
50+
document.querySelector('#float').innerHTML = 'float: ' + grid.getFloat();
51+
};
52+
addNewWidget();
53+
grid.enableMove(false);
54+
grid.enableResize(false);
55+
</script>
56+
</body>
57+
</html>

‎src/gridstack-ddi.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ export class GridStackDDI {
1717
protected static ddi: GridStackDDI;
1818

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

2425
/** get the current registered plugin to use */
2526
static get(): GridStackDDI {
26-
if (!GridStackDDI.ddi) { GridStackDDI.registerPlugin(GridStackDDI); }
27-
return GridStackDDI.ddi;
27+
return GridStackDDI.ddi || GridStackDDI.registerPlugin(GridStackDDI);
2828
}
2929

3030
/** removes any drag&drop present (called during destroy) */

‎src/h5/dd-draggable.ts‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
7272
this._drag = this._drag.bind(this);
7373
this._dragEnd = this._dragEnd.bind(this);
7474
this._dragFollow = this._dragFollow.bind(this);
75-
76-
this.el.draggable = true;
77-
this.el.classList.add('ui-draggable');
78-
this.el.addEventListener('mousedown', this._mouseDown);
79-
this.el.addEventListener('dragstart', this._dragStart);
75+
this.enable();
8076
}
8177

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

96-
public disable(): void {
95+
public disable(forDestroy = false): void {
9796
super.disable();
98-
this.el.draggable = false;
99-
this.el.classList.add('ui-draggable-disabled');
97+
this.el.removeAttribute('draggable');
98+
this.el.classList.remove('ui-draggable');
99+
if (!forDestroy) this.el.classList.add('ui-draggable-disabled');
100+
this.el.removeEventListener('mousedown', this._mouseDown);
101+
this.el.removeEventListener('dragstart', this._dragStart);
100102
}
101103

102104
public destroy(): void {
@@ -106,10 +108,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
106108
// destroyed.
107109
this._dragEnd({} as DragEvent);
108110
}
109-
this.el.draggable = false;
110-
this.el.classList.remove('ui-draggable');
111-
this.el.removeEventListener('mousedown', this._mouseDown);
112-
this.el.removeEventListener('dragstart', this._dragStart);
111+
this.disable(true);
113112
delete this.el;
114113
delete this.helper;
115114
delete this.option;

‎src/h5/dd-resizable.ts‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
4949
super();
5050
this.el = el;
5151
this.option = opts;
52-
53-
this.el.classList.add('ui-resizable');
52+
this.enable();
5453
this._setupAutoHide();
5554
this._setupHandlers();
5655
}
@@ -64,17 +63,15 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
6463
}
6564

6665
public enable(): void {
67-
if (this.disabled) {
68-
super.enable();
69-
this.el.classList.remove('ui-resizable-disabled');
70-
}
66+
super.enable();
67+
this.el.classList.add('ui-resizable');
68+
this.el.classList.remove('ui-resizable-disabled');
7169
}
7270

7371
public disable(): void {
74-
if (!this.disabled) {
75-
super.disable();
76-
this.el.classList.add('ui-resizable-disabled');
77-
}
72+
super.disable();
73+
this.el.classList.add('ui-resizable-disabled');
74+
this.el.classList.remove('ui-resizable');
7875
}
7976

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

0 commit comments

Comments
 (0)