Merge pull request #1740 from adumesny/master

doc updates

Author: adumesny

doc/CHANGES.md

@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [4.2.1-dev](#421-dev)
 - [4.2.1 (2021-4-18)](#421-2021-4-18)
 - [4.2.0 (2021-4-11)](#420-2021-4-11)
 - [4.1.0 (2021-4-7)](#410-2021-4-7)
@@ -54,6 +55,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 -->
+## 4.2.1-dev
+
+- fix [#1684](https://github.com/gridstack/gridstack.js/issues/1684) mac Safari H5 draggable broken in 4.0.1. Thanks [@wurambo](https://github.com/wurambo)
+
 ## 4.2.1 (2021-4-18)
 
 - fix [#1700](https://github.com/gridstack/gridstack.js/issues/1700) JQ nested grid drag fix broken in 4.0.3 (but much older underlying issue)

doc/README.md

@@ -491,7 +491,8 @@ gap between grid item and content (default?: 10). This will set all 4 sides and
 
 ### `movable(el, val)`
 
-Enables/Disables moving.
+Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
+IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.
 
 - `el` - widget to modify
 - `val` - if `true` widget will be draggable.
@@ -516,7 +517,7 @@ Parameters:
 
 ### `resizable(el, val)`
 
-Enables/Disables resizing.
+Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.
 
 - `el` - widget to modify
 - `val` - if `true` widget will be resizable.

src/gridstack.ts

@@ -1468,13 +1468,14 @@ export class GridStack {
   public static setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt): void { /* implemented in gridstack-dd.ts */ }
 
   /**
-   * Enables/Disables moving of specific grid elements. If you want all items, and have it stay, use enableMove() instead. No-op for static grids.
+   * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
+   * IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.
    * @param els widget or selector to modify.
    * @param val if true widget will be draggable.
    */
   public movable(els: GridStackElement, val: boolean): GridStack { return this }
   /**
-   * Enables/Disables resizing of specific grid elements. If you want all items, and have it stay, use enableResize() instead. No-op for static grids.
+   * Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.
    * @param els  widget or selector to modify
    * @param val  if true widget will be resizable.
    */

src/h5/dd-droppable.ts

@@ -105,12 +105,14 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal called when the item is leaving our area, stop tracking if we had moving item */
   private _dragLeave(event: DragEvent): void {
+
+    // ignore leave events on our children (get when starting to drag our items)
     // Note: Safari Mac has null relatedTarget which causes #1684 so check if DragEvent is inside the grid instead
     if (!event.relatedTarget) {
       const { bottom, left, right, top } = this.el.getBoundingClientRect();
       if (event.x < right && event.x > left && event.y < bottom && event.y > top) return;
-    }
-    if (this.el.contains(event.relatedTarget as HTMLElement)) return;
+    } else if (this.el.contains(event.relatedTarget as HTMLElement)) return;
+
     this._removeLeaveCallbacks();
     if (this.moving) {
       event.preventDefault();