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.

Author: adumesny

demo/nested.html

@@ -71,8 +71,8 @@ <h1>Nested grids demo</h1>
       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}},
       ]
     };
 

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);

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;

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) {

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<DragEvent>(e, { target: this.el, type: 'drop' });

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);

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