H5 safari drag fix

* fix #1540
* DragEvent is not defined on Safari (regular MouseEvent + dataTransfer field)
so fixed initEvent() to not use `instanceof DragEvent` but copy fields
* according to spec (and required by Safari) the drag image has to be visible in
the browser (in dom and not hidden) so make it a 1px div
(this also helps chrome not showing a no-drop target cursor on Mac)
* more DD code cleanup

Author: adumesny

doc/CHANGES.md

@@ -43,10 +43,10 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
-
 ## 3.1.2-dev
 
 - 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
 
 ## 3.1.2 (2020-12-7)
 

src/gridstack-dd.ts

@@ -101,7 +101,7 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
       this.engine.beginUpdate(node);
       this.engine.addNode(node);
 
-      this._writeAttrs(this.placeholder, node.x, node.y, node.w, node.h);
+      this._writePosAttr(this.placeholder, node.x, node.y, node.w, node.h);
       this.el.appendChild(this.placeholder);
       node.el = this.placeholder; // dom we update while dragging...
       node._beforeDragX = node.x;
@@ -354,29 +354,22 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
 
     this.engine.cleanNodes();
     this.engine.beginUpdate(node);
-    cellWidth = this.cellWidth();
-    cellHeight = this.getCellHeight(true); // force pixels for calculations
 
-    this.placeholder.setAttribute('gs-x', target.getAttribute('gs-x'));
-    this.placeholder.setAttribute('gs-y', target.getAttribute('gs-y'));
-    this.placeholder.setAttribute('gs-w', target.getAttribute('gs-w'));
-    this.placeholder.setAttribute('gs-h', target.getAttribute('gs-h'));
+    this._writePosAttr(this.placeholder, node.x, node.y, node.w, node.h)
     this.el.append(this.placeholder);
 
     node.el = this.placeholder;
     node._beforeDragX = node.x;
     node._beforeDragY = node.y;
     node._prevYPix = ui.position.top;
 
+    // set the min/max resize info
+    cellWidth = this.cellWidth();
+    cellHeight = this.getCellHeight(true); // force pixels for calculations
     GridStackDD.get().resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1));
     GridStackDD.get().resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
-    // also set max if set #1330
-    if (node.maxW) {
-      GridStackDD.get().resizable(el, 'option', 'maxWidth', cellWidth * node.maxW);
-    }
-    if (node.maxH) {
-      GridStackDD.get().resizable(el, 'option', 'maxHeight', cellHeight * node.maxH);
-    }
+    if (node.maxW) { GridStackDD.get().resizable(el, 'option', 'maxWidth', cellWidth * node.maxW); }
+    if (node.maxH) { GridStackDD.get().resizable(el, 'option', 'maxHeight', cellHeight * node.maxH); }
   }
 
   /** called when item is being dragged/resized */
@@ -413,7 +406,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
 
         if (node._temporaryRemoved) {
           this.engine.addNode(node);
-          this._writeAttrs(this.placeholder, x, y, w, h);
+          this._writePosAttr(this.placeholder, x, y, w, h);
           this.el.appendChild(this.placeholder);
           node.el = this.placeholder;
           delete node._temporaryRemoved;
@@ -464,10 +457,10 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       this._clearRemovingTimeout(el);
       if (!node._temporaryRemoved) {
         Utils.removePositioningStyles(target);
-        this._writeAttrs(target, node.x, node.y, node.w, node.h);
+        this._writePosAttr(target, node.x, node.y, node.w, node.h);
       } else {
         Utils.removePositioningStyles(target);
-        this._writeAttrs(target, node._beforeDragX, node._beforeDragY, node.w, node.h);
+        this._writePosAttr(target, node._beforeDragX, node._beforeDragY, node.w, node.h);
         node.x = node._beforeDragX;
         node.y = node._beforeDragY;
         delete node._temporaryRemoved;

src/gridstack.ts

@@ -304,7 +304,7 @@ export class GridStack {
           if (removeDOM && n._id === null) {
             if (el && el.parentNode) { el.parentNode.removeChild(el) }
           } else {
-            this._writeAttrs(el, n.x, n.y, n.w, n.h);
+            this._writePosAttr(el, n.x, n.y, n.w, n.h);
           }
         });
         this._updateStyles(false, maxH); // false = don't recreate, just append if need be
@@ -1283,7 +1283,7 @@ export class GridStack {
   }
 
   /** @internal call to write x,y,w,h attributes back to element */
-  private _writeAttrs(el: HTMLElement, x?: number, y?: number, w?: number, h?: number): GridStack {
+  private _writePosAttr(el: HTMLElement, x?: number, y?: number, w?: number, h?: number): GridStack {
     if (x !== undefined && x !== null) { el.setAttribute('gs-x', String(x)); }
     if (y !== undefined && y !== null) { el.setAttribute('gs-y', String(y)); }
     if (w) { el.setAttribute('gs-w', String(w)); }
@@ -1294,9 +1294,9 @@ export class GridStack {
   /** @internal call to write any default attributes back to element */
   private _writeAttr(el: HTMLElement, node: GridStackWidget): GridStack {
     if (!node) return this;
-    this._writeAttrs(el, node.x, node.y, node.w, node.h);
+    this._writePosAttr(el, node.x, node.y, node.w, node.h);
 
-    let attrs /*: like GridStackWidget but strings */ = { // remaining attributes
+    let attrs /*: GridStackWidget but strings */ = { // remaining attributes
       autoPosition: 'gs-auto-position',
       minW: 'gs-min-w',
       minH: 'gs-min-h',
@@ -1309,7 +1309,7 @@ export class GridStack {
       resizeHandles: 'gs-resize-handles'
     };
     for (const key in attrs) {
-      if (node[key]) { // 0 is valid for x,y only but done above already and not in list
+      if (node[key]) { // 0 is valid for x,y only but done above already and not in list anyway
         el.setAttribute(attrs[key], String(node[key]));
       } else {
         el.removeAttribute(attrs[key]);

src/h5/dd-draggable.ts

@@ -45,7 +45,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   private dragFollowTimer: number;
   /** @internal */
-  private mouseDownElement: HTMLElement;
+  private dragEl: HTMLElement;
   /** @internal */
   private dragging = false;
   /** @internal */
@@ -127,12 +127,12 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     let className = this.option.handle.substring(1);
     let el = event.target as HTMLElement;
     while (el && !el.classList.contains(className)) { el = el.parentElement; }
-    this.mouseDownElement = el;
+    this.dragEl = el;
   }
 
   /** @internal */
   private _dragStart(event: DragEvent): void {
-    if (!this.mouseDownElement) { event.preventDefault();  return; }
+    if (!this.dragEl) { event.preventDefault(); return; }
     DDManager.dragElement = this;
     this.helper = this._createHelper(event);
     this._setupHelperContainmentStyle();
@@ -201,20 +201,19 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     this.triggerEvent('dragstop', ev);
     delete DDManager.dragElement;
     delete this.helper;
-    delete this.mouseDownElement;
+    delete this.dragEl;
   }
 
-  /** @internal */
+  /** @internal create a clone copy (or user defined method) of the original drag item if set */
   private _createHelper(event: DragEvent): HTMLElement {
-    const helperIsFunction = (typeof this.option.helper) === 'function';
-    const helper = (helperIsFunction
-      ? (this.option.helper as ((event: Event) => HTMLElement)).apply(this.el, [event])
-      : (this.option.helper === "clone" ? DDUtils.clone(this.el) : this.el)
-    ) as HTMLElement;
+    let helper = this.el;
+    if (typeof this.option.helper === 'function') {
+      helper = this.option.helper.apply(this.el, event);
+    } else if (this.option.helper === 'clone') {
+      helper = DDUtils.clone(this.el);
+    }
     if (!document.body.contains(helper)) {
-      DDUtils.appendTo(helper, (this.option.appendTo === "parent"
-        ? this.el.parentNode
-        : this.option.appendTo));
+      DDUtils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentNode : this.option.appendTo);
     }
     if (helper === this.el) {
       this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);
@@ -227,7 +226,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     this.helper.style.pointerEvents = 'none';
     this.helper.style.width = this.dragOffset.width + 'px';
     this.helper.style.height = this.dragOffset.height + 'px';
-    this.helper.style['willChange'] = 'left, top';
+    this.helper.style.willChange = 'left, top';
     this.helper.style.transition = 'none'; // show up instantly
     this.helper.style.position = this.option.basePosition || DDDraggable.basePosition;
     this.helper.style.zIndex = '1000';
@@ -282,23 +281,27 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  /** @internal */
+  /** @internal prevent the default gost image to be created (which has wrongas we move the helper/element instead
+   * (legacy jquery UI code updates the top/left of the item).
+   * TODO: maybe use mouse event instead of HTML5 drag as we have to work around it anyway, or change code to not update
+   * the actual grid-item but move the gost image around (and special case jq version) ?
+   **/
   private _cancelDragGhost(e: DragEvent): DDDraggable {
-    if (e.dataTransfer != null) {
-      e.dataTransfer.setData('text', '');
-    }
-    e.dataTransfer.effectAllowed = 'move';
-    if ('function' === typeof DataTransfer.prototype.setDragImage) {
-      e.dataTransfer.setDragImage(new Image(), 0, 0);
-    } else {
-      // ie
-      (e.target as HTMLElement).style.display = 'none';
-      setTimeout(() => {
-        (e.target as HTMLElement).style.display = '';
-      });
-      e.stopPropagation();
-      return;
-    }
+    /* doesn't seem to do anything...
+    let t = e.dataTransfer;
+    t.effectAllowed = 'none';
+    t.dropEffect = 'none';
+    t.setData('text', '');
+    */
+
+    // NOTE: according to spec (and required by Safari see #1540) the image has to be visible in the browser (in dom and not hidden) so make it a 1px div
+    let img = document.createElement('div');
+    img.style.width = '1px';
+    img.style.height = '1px';
+    document.body.appendChild(img);
+    e.dataTransfer.setDragImage(img, 0, 0);
+    setTimeout(() => document.body.removeChild(img)); // nuke once drag had a chance to grab this 'image'
+
     e.stopPropagation();
     return this;
   }

src/h5/dd-utils.ts

@@ -41,7 +41,7 @@ export class DDUtils {
     }
   }
 
-  public static setPositionRelative(el): void {
+  public static setPositionRelative(el: HTMLElement): void {
     if (!(/^(?:r|a|f)/).test(window.getComputedStyle(el).position)) {
       el.style.position = "relative";
     }
@@ -65,32 +65,21 @@ export class DDUtils {
   }
 
   public static initEvent<T>(e: DragEvent | MouseEvent, info: { type: string; target?: EventTarget }): T {
-    const kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(',');
-    const ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY'.split(',');
     const evt = { type: info.type };
     const obj = {
       button: 0,
       which: 0,
       buttons: 1,
       bubbles: true,
       cancelable: true,
-      originEvent: e,
       target: info.target ? info.target : e.target
+    };
+    // don't check for `instanceof DragEvent` as Safari use MouseEvent #1540
+    if ((e as DragEvent).dataTransfer) {
+      evt['dataTransfer'] = (e as DragEvent).dataTransfer; // workaround 'readonly' field.
     }
-    if (e instanceof DragEvent) {
-      Object.assign(obj, { dataTransfer: e.dataTransfer });
-    }
-    DDUtils._copyProps(evt, e, kbdProps);
-    DDUtils._copyProps(evt, e, ptProps);
-    DDUtils._copyProps(evt, obj, Object.keys(obj));
-    return evt as unknown as T;
-  }
-
-  /** @internal */
-  private static _copyProps(dst: unknown, src: unknown, props: string[]): void {
-    for (let i = 0; i < props.length; i++) {
-      const p = props[i];
-      dst[p] = src[p];
-    }
+    ['altKey','ctrlKey','metaKey','shiftKey'].forEach(p => evt[p] = e[p]); // keys
+    ['pageX','pageY','clientX','clientY','screenX','screenY'].forEach(p => evt[p] = e[p]); // point info
+    return {...evt, ...obj} as unknown as T;
   }
-}
+}