feat(cdkDrag): cdkDragHandleBoundary
- 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
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