h5: drag fix

adumesny · adumesny · commit 288f34a3abf7 · 2020-12-06T21:50:07.000-08:00
* fix #1511 * you can now click any grid item content and drag away * added sample test case
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -52,6 +52,7 @@ Change log
 
 - fix [1330](https://github.com/gridstack/gridstack.js/issues/1330) `maxW` does not work as intended with resizable handle `"w"`
 - fix [1472](https://github.com/gridstack/gridstack.js/issues/1472) support all options for new dragged in widgets (read all `gs-xyz` attributes)
+- fix [1511](https://github.com/gridstack/gridstack.js/issues/1511) dragging any grid item content works
 
 ## 3.1.0 (2020-12-4)
 
diff --git a/spec/e2e/html/1511-drag-any-content.html b/spec/e2e/html/1511-drag-any-content.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Float grid demo</title>
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <script src="../../../dist/gridstack-h5.js"></script>
+  <style>
+    .x {
+      width:100%;
+      height:100%;
+    }
+  </style>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>Float grid demo</h1>
+    <br><br>
+    <div class="grid-stack"></div>
+  </div>
+  <script src="../../../demo/events.js"></script>
+  <script type="text/javascript">
+    let grid = GridStack.init({float: true, cellHeight: 70});
+    addEvents(grid);
+    var items = [
+      {x: 0, y: 0, w: 2, h: 2, content: '<table class="x"><tr><td><span>table should work</span></td></tr></table>'},
+      {x: 2, y: 0, w: 2, h: 2, content: '<div class="x"><span>using a span</span></div>'},
+      {x: 4, y: 0, w: 2, h: 2, content: '<div class="x">using a div</div>'},
+      {x: 6, y: 0, w: 2, h: 2, content: 'works anywhere'},
+    ];
+
+    grid.load(items);
+  </script>
+</body>
+</html>
diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts
@@ -121,22 +121,18 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  /** @internal */
+  /** @internal call when mouse goes down before a dragstart happens */
   private _mouseDown(event: MouseEvent): void {
-    this.mouseDownElement = event.target as HTMLElement;
+    // make sure we are clicking on a drag handle or child of it...
+    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;
   }
 
   /** @internal */
   private _dragStart(event: DragEvent): void {
-    if (this.option.handle && !(
-      this.mouseDownElement
-      && this.mouseDownElement.matches(
-        `${this.option.handle}, ${this.option.handle} > *`
-      )
-    )) {
-      event.preventDefault();
-      return;
-    }
+    if (!this.mouseDownElement) { event.preventDefault();  return; }
     DDManager.dragElement = this;
     this.helper = this._createHelper(event);
     this._setupHelperContainmentStyle();
