diff --git a/src/gridstack.scss b/src/gridstack.scss index 32f390b06..6bf54f9c8 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -65,7 +65,6 @@ $animation_speed: .3s !default; &.ui-resizable-resizing { z-index: 100; - > .grid-stack-item-content, > .grid-stack-item-content { box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); opacity: 0.8; @@ -125,4 +124,9 @@ $animation_speed: .3s !default; &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{ @include vendor(transition, left .0s, top .0s, height .0s, width .0s); } + + // without this, the html5 drag will flicker between no-drop and drop when dragging over second grid + &.ui-droppable.ui-droppable-over > *:not(.ui-droppable) { + pointer-events: none; + } } diff --git a/src/gridstack.ts b/src/gridstack.ts index d2999c634..58aa4192f 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -563,6 +563,7 @@ export class GridStack { this.el.parentNode.removeChild(this.el); } this._removeStylesheet(); + delete this.placeholder; delete this.engine; return this; } diff --git a/src/h5/dd-droppable.ts b/src/h5/dd-droppable.ts index 6516c55af..70b4a8058 100644 --- a/src/h5/dd-droppable.ts +++ b/src/h5/dd-droppable.ts @@ -23,7 +23,6 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt public el: HTMLElement; public option: DDDroppableOpt; private acceptable: boolean = null; - private style; constructor(el: HTMLElement, opts: DDDroppableOpt = {}) { super(); @@ -82,7 +81,6 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt this.el.classList.add('ui-droppable'); this.el.addEventListener('dragenter', this.dragEnter); this.setupAccept(); - this.createStyleSheet(); return this; } @@ -162,20 +160,6 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt return this; } - // TODO: share this with other instances and when do remove ??? - private createStyleSheet(): DDDroppable { - const content = `.ui-droppable.ui-droppable-over > *:not(.ui-droppable) {pointer-events: none;}`; - this.style = document.createElement('style'); - this.style.innerText = content; - this.el.appendChild(this.style); - return this; - } - - // TODO: not call - private removeStyleSheet() { - this.el.removeChild(this.style); - } - private ui(drag: DDDraggable) { return { draggable: drag.el,