Merge pull request gridstack#2222 from adumesny/master

Alain Dumesny · web-flow · commit 5ed51bb95f9d · 2023-02-23T08:41:26.000-08:00
added draggable header example
diff --git a/demo/index.html b/demo/index.html
@@ -26,6 +26,7 @@ <h1>Demos</h1>
     <li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
     <li><a href="serialization.html">Serialization</a></li>
     <li><a href="static.html">Static</a></li>
+    <li><a href="title_drag.html">Title drag</a></li>
     <li><a href="two.html">Two grids</a></li>
     <li><a href="two_vertical.html">Two grids Vertical</a></li>
     <li><a href="vue2js.html">Vue2.js</a></li>
diff --git a/demo/title_drag.html b/demo/title_drag.html
@@ -0,0 +1,42 @@
+<!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>Title area drag</title>
+
+  <link rel="stylesheet" href="demo.css"/>
+  <script src="../dist/gridstack-all.js"></script>
+  <style type="text/css">
+    .card-header {
+      cursor: move;
+      min-height: 25px;
+    }
+    .card-header:hover {
+      background-color: rgba(0,0,0,0.1);
+    }
+    .card {
+      text-align: left;
+    }
+  </style>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>Title area drag</h1>
+    <br><br>
+    <div class="grid-stack">
+      <div class="grid-stack-item" gs-w="3" gs-h="3"><div class="grid-stack-item-content">
+        <div class="card-header">- Drag here -</div>
+        <div class="card">the rest of the panel content doesn't drag</div>
+      </div></div>
+    </div>
+  </div>
+  <script src="events.js"></script>
+  <script type="text/javascript">
+    let grid = GridStack.init({ handle: '.card-header' }); // drag by the header only
+    addEvents(grid);
+  </script>
+</body>
+</html>
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -84,7 +84,6 @@ Change log
 
 ## 7.2.3-dev (TBD)
 * fix [#2206](https://github.com/gridstack/gridstack.js/issues/2206) `load()` with collision fix
-* fix [#2210](https://github.com/gridstack/gridstack.js/pull/2210) restored checking for grid option.handle draggable area
 
 ## 7.2.3 (2023-02-02)
 * fix `addWidget()` to handle passing just {el} which was needed for Angular HMTL template demo
diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts
@@ -136,12 +136,13 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     // also check for content editable
     if ((e.target as HTMLElement).closest('[contenteditable="true"]')) return true;
 
+    // REMOVE: why would we get the event if it wasn't for us or child ?
     // make sure we are clicking on a drag handle or child of it...
     // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)
-    let className = this.option.handle.substring(1);
-    let el = e.target as HTMLElement;
-    while (el && !el.classList.contains(className)) { el = el.parentElement; }
-    if (!el) return;
+    // let className = this.option.handle.substring(1);
+    // let el = e.target as HTMLElement;
+    // while (el && !el.classList.contains(className)) { el = el.parentElement; }
+    // if (!el) return;
 
     this.mouseDownEvent = e;
     delete this.dragging;
