diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 887129c40..c3b3cc75d 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -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) diff --git a/spec/e2e/html/1545_disable_move_after.html b/spec/e2e/html/1545_disable_move_after.html new file mode 100644 index 000000000..ce8719ecb --- /dev/null +++ b/spec/e2e/html/1545_disable_move_after.html @@ -0,0 +1,57 @@ + + + + + + + disable move after + + + + + + +
+

disable move/resize after #1545

+
+ Add Widget + float: true +
+

+
+
+ + + + diff --git a/src/gridstack-ddi.ts b/src/gridstack-ddi.ts index 0ea6ef5da..6e0dad86a 100644 --- a/src/gridstack-ddi.ts +++ b/src/gridstack-ddi.ts @@ -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) */ diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts index 2e2229379..c3f9717d4 100644 --- a/src/h5/dd-draggable.ts +++ b/src/h5/dd-draggable.ts @@ -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 { @@ -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 { @@ -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; diff --git a/src/h5/dd-resizable.ts b/src/h5/dd-resizable.ts index d97f697d7..54d04b050 100644 --- a/src/h5/dd-resizable.ts +++ b/src/h5/dd-resizable.ts @@ -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(); } @@ -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 { @@ -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 {