Skip to content

Commit

Permalink
allow button as handle dragging
Browse files Browse the repository at this point in the history
* fix gridstack#2677
* allow event target to be draggable even if in the blocked list if that is the specified handle.
  • Loading branch information
adumesny committed May 26, 2024
1 parent bb5e0d6 commit 63754ba
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 1 deletion.
1 change: 1 addition & 0 deletions doc/CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
25 changes: 25 additions & 0 deletions spec/e2e/html/2677_drag_button.html
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion src/dd-draggable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit 63754ba

Please sign in to comment.