From 7a2922cdac9c3ab9b33c096dac6e5522782d8286 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 14 Aug 2022 23:04:42 -0700 Subject: [PATCH] more mobile fixes more mobile fixed for #1757 * turns out window.TouchEvent=true on windows 10 Chrome, so don't use it to detect `isTouch` as we were getting double enter/pointerEnter events * some fix to draggable (desktop tested) * placeholder is not a 10% black shadow (easier to see than dashed outline) TODO: in nested.html dragging to other and back to different spot goes to original not dropped location. Apparently the flow is very different from draggable for nested grids... need more work. --- demo/nested.html | 4 ++-- src/gridstack-dd.ts | 15 +++++++-------- src/gridstack.scss | 2 +- src/h5/dd-draggable.ts | 8 +++++++- src/h5/dd-droppable.ts | 2 +- src/h5/dd-resizable-handle.ts | 2 +- src/h5/touch.ts | 2 +- 7 files changed, 20 insertions(+), 15 deletions(-) diff --git a/demo/nested.html b/demo/nested.html index a70eeeea1..38d5c738b 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -71,8 +71,8 @@

Nested grids demo

id: 'main', children: [ {x:0, y:0, content: 'regular item'}, - {x:1, w:4, h:4, subGrid: {children: sub1, id:'sub1_grid', class: 'sub1', ...subOptions}}, - {x:5, w:3, h:4, subGrid: {children: sub2, id:'sub2_grid', class: 'sub2', ...subOptions}}, + {x:1, y:0, w:4, h:4, subGrid: {children: sub1, id:'sub1_grid', class: 'sub1', ...subOptions}}, + {x:5, y:0, w:3, h:4, subGrid: {children: sub2, id:'sub2_grid', class: 'sub2', ...subOptions}}, ] }; diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index a905111bd..a9767b2c8 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -6,7 +6,7 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import { GridStackDDI } from './gridstack-ddi'; import { GridItemHTMLElement, GridStackNode, GridStackElement, DDUIData, DDDragInOpt, GridStackPosition } from './types'; -import { GridStack, MousePosition } from './gridstack'; +import { GridStack } from './gridstack'; import { Utils } from './utils'; /** Drag&Drop drop options */ @@ -273,7 +273,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack { Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578 Utils.removePositioningStyles(el);// @ts-ignore this._writeAttr(el, node); - this.el.appendChild(el);// @ts-ignore + this.el.appendChild(el);// @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only) this._updateContainerHeight(); this.engine.addedNodes.push(node);// @ts-ignore this._triggerAddEvent();// @ts-ignore @@ -413,16 +413,15 @@ GridStack.prototype._prepareDragDropByNode = function(this: GridStack, node: Gri delete node.el; el.remove(); } else { - if (!node._temporaryRemoved) { - // move to new placeholder location - Utils.removePositioningStyles(target);// @ts-ignore - this._writePosAttr(target, node); - } else { + Utils.removePositioningStyles(target); + if (node._temporaryRemoved) { // got removed - restore item back to before dragging position - Utils.removePositioningStyles(target); Utils.copyPos(node, node._orig);// @ts-ignore this._writePosAttr(target, node); this.engine.addNode(node); + } else { + // move to new placeholder location + this._writePosAttr(target, node); } if (this._gsEventHandler[event.type]) { this._gsEventHandler[event.type](event, target); diff --git a/src/gridstack.scss b/src/gridstack.scss index cf1b76e85..bb6f35c1a 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -29,7 +29,7 @@ $animation_speed: .3s !default; } .grid-stack-placeholder > .placeholder-content { - border: 1px dashed lightgray; + background-color: rgba(0,0,0,0.1); margin: 0; position: absolute; width: auto; diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts index cfc9db59d..cadbc0dc6 100644 --- a/src/h5/dd-draggable.ts +++ b/src/h5/dd-draggable.ts @@ -199,6 +199,12 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt } if (this.dragging) { delete this.dragging; + + // reset the drop target if dragging over ourself (already parented, just moving during stop callback below) + if (DDManager.dropElement?.el === this.el.parentElement) { + delete DDManager.dropElement; + } + this.helper.classList.remove('ui-draggable-dragging'); this.helperContainment.style.position = this.parentOriginStylePosition || null; if (this.helper === this.el) { @@ -210,7 +216,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt if (this.option.stop) { this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after! } - this.triggerEvent('stop', ev); + this.triggerEvent('dragstop', ev); // call the droppable method to receive the item if (DDManager.dropElement) { diff --git a/src/h5/dd-droppable.ts b/src/h5/dd-droppable.ts index 1a403ee22..45a54f1f3 100644 --- a/src/h5/dd-droppable.ts +++ b/src/h5/dd-droppable.ts @@ -136,7 +136,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt } } - /** item is being dropped on us - called byt the drag mouseup handler - this calls the client drop event */ + /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */ public drop(e: MouseEvent): void { e.preventDefault(); const ev = DDUtils.initEvent(e, { target: this.el, type: 'drop' }); diff --git a/src/h5/dd-resizable-handle.ts b/src/h5/dd-resizable-handle.ts index 0aaac3e61..e118978e8 100644 --- a/src/h5/dd-resizable-handle.ts +++ b/src/h5/dd-resizable-handle.ts @@ -98,7 +98,7 @@ export class DDResizableHandle { /** @internal */ protected _mouseUp(e: MouseEvent): void { if (this.moving) { - this._triggerEvent('stop', e); + this._triggerEvent('resizestop', e); } document.removeEventListener('mousemove', this._mouseMove, true); document.removeEventListener('mouseup', this._mouseUp); diff --git a/src/h5/touch.ts b/src/h5/touch.ts index 9bf9150a9..5ff52716e 100644 --- a/src/h5/touch.ts +++ b/src/h5/touch.ts @@ -10,7 +10,7 @@ import { DDManager } from "./dd-manager"; */ export const isTouch: boolean = ( 'ontouchstart' in document || 'ontouchstart' in window - || !!window.TouchEvent + // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this || ((window as any).DocumentTouch && document instanceof (window as any).DocumentTouch) || navigator.maxTouchPoints > 0 || (navigator as any).msMaxTouchPoints > 0