Merge pull request #1561 from adumesny/develop

H5 Safari fix delay when dropping

Author: adumesny

doc/CHANGES.md

@@ -46,7 +46,8 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 ## 3.1.3-dev
 
-- fix [1557](https://github.com/gridstack/gridstack.js/pull/1557) fixed no-drop cursor on windows when dragging within a default grid (no external drag in)
+- fix [1557](https://github.com/gridstack/gridstack.js/pull/1557) fix no-drop cursor on windows when dragging within a default grid (no external drag in)
+- fix [1541](https://github.com/gridstack/gridstack.js/pull/1541) fix Safari H5 elay when dropping items
 
 ## 3.1.3 (2021-1-2)
 

src/h5/dd-draggable.ts

@@ -56,8 +56,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   private helperContainment: HTMLElement;
   /** @internal */
   private static basePosition: 'fixed' | 'absolute' = 'absolute';
-  /** @internal */
-  private static dragEventListenerOption = DDUtils.isEventSupportPassiveOption ? { capture: true, passive: true } : true;
+  /** @internal #1541 can't have {passive: true} on Safari as otherwise it reverts animate back to old location on drop */
+  private static dragEventListenerOption = true; // DDUtils.isEventSupportPassiveOption ? { capture: true, passive: true } : true;
   /** @internal */
   private static originStyleProp = ['transition', 'pointerEvents', 'position',
     'left', 'top', 'opacity', 'zIndex', 'width', 'height', 'willChange'];
@@ -164,6 +164,9 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   private _drag(event: DragEvent): void {
+    // Safari: prevent default to allow drop to happen instead of reverting back (with animation) and delaying dragend #1541
+    // https://stackoverflow.com/questions/61760755/how-to-fire-dragend-event-immediately
+    event.preventDefault();
     this._dragFollow(event);
     const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drag' });
     if (this.option.drag) {