angular / angular/components

feat(cdkDrag): cdkDragHandleBoundary

Open
#27,803 1 comment 2 reactions 0 assignees View on GitHub
area: cdk/drag-drop feature
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

I want to limit where my dragable component can be dragged to but by its handle element rather than by its entire dragable element.

### Use Case

A bottom sliding drawer. If I can mark the entire drawer with `cdkDrag`, place `cdkDragHandle` on the drawer's handle, limit motion to the y axis, and then have a new `cdkHandleBoundary` directive then my boundary element can use overflow clipping so that when the handle is dragged to the bottom of the boundary the entire drawer content is hidden and when the handle is dragged upward then the drawer content is shown.

Contributor guide

Open the contributing guide

Research direction

Start by reading the cdkDrag and cdkDragHandle entry points and tracing how their movement boundaries are defined. Determine how a new cdkHandleBoundary directive would constrain dragging through the handle while preserving y-axis movement and overflow clipping for the drawer use case. Done means the requested handle-based boundary behavior is implemented and verified for the described sliding drawer scenario.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.