allow button as handle dragging

* fix #2677 * allow event target to be draggable even if in the blocked list if that is the specified handle.
gridstack · May 26, 2024 · 63754ba · 63754ba
1 parent bb5e0d6
commit 63754ba
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -112,6 +112,7 @@ Change log
 ## 10.1.2-dev (TBD)
 * fix: [#2672](https://github.com/gridstack/gridstack.js/pull/2672) dropping into full grid JS error
 * fix: [#2676](https://github.com/gridstack/gridstack.js/issues/2676) handle minW resizing when column count is less
+* fix: [#2677](https://github.com/gridstack/gridstack.js/issues/2677) allow button as handle dragging
 
 ## 10.1.2 (2024-03-30)
 * fix: [#2628](https://github.com/gridstack/gridstack.js/issues/2628) `removeAll()` does not trigger Angular's ngOnDestroy 

diff --git a/spec/e2e/html/2677_drag_button.html b/spec/e2e/html/2677_drag_button.html
@@ -0,0 +1,25 @@
+<!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>drag button demo</title>
+
+  <link rel="stylesheet" href="../../../demo/demo.css" />
+  <script src="../../../dist/gridstack-all.js"></script>
+  <style>
+    .handle { cursor: move }
+  </style>
+</head>
+<body>
+  <div class="grid-stack"></div>
+  <script type="text/javascript">
+    let items = [
+      {x: 0, y: 0, content: '<button class="handle">Handle</button>'},
+      {x: 1, y: 0, w: 3, content: '<span class="handle">Handle</span>'},
+    ];
+    let grid = GridStack.init({handle: '.handle', cellHeight: 70}).load(items);
+  </script>
+</body>
+</html>
diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts
@@ -136,7 +136,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     if (e.button !== 0) return true; // only left click
 
     // make sure we are not clicking on known object that handles mouseDown, or ones supplied by the user
-    if ((e.target as HTMLElement).closest(skipMouseDown)) return true;
+    if (e.target !== this.dragEl && (e.target as HTMLElement).closest(skipMouseDown)) return true;
     if (this.option.cancel) {
       if ((e.target as HTMLElement).closest(this.option.cancel)) return true;
     }