feat(drag-drop): New Optional Input [cdkDragStartPredicate]
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
## Feature Request
### Problem Statement
Currently, the CdkDrag directive doesn't provide a way to conditionally prevent drag operations from starting based on the initial mouse/touch event. This makes it impossible to implement complex drag start conditions, such as only allowing drags from specific elements or under certain event conditions.
Add a new input [cdkDragStartPredicate] to the CdkDrag directive that accepts a predicate function to determine whether a drag operation should start.
### Proposed API
```typescript
@Input('cdkDragStartPredicate')
dragStartPredicate: ((event: TouchEvent | MouseEvent) => boolean) | undefined;
```
### Example Usage
_HTML:_
```html
Draggable content
```
_component:_
```typescript
myDragStartPredicate(event: TouchEvent | MouseEvent): boolean {
const element = event.target as HTMLElement;
// Check if the target or any of its parents is an input element
return !element.closest('input, textarea, [contenteditable="true"]');
}
```
See: https://stackblitz.com/edit/wc3rt4?file=src%2Fexample%2Fcdk-drag-drop-sorting-example.css
# Details
### Benefits
- More granular control over drag initialization
- Better integration with custom UI patterns
- Improved accessibility by allowing precise control over drag triggers
- Reduced need for workarounds using multiple directives
-
### Implementation Notes
- The predicate should be called before the drag sequence begins
- Return true to allow the drag to start, false to prevent it
- Should work with both mouse and touch events
- Should integrate well with existing cdkDragHandle functionality
-
### Related Issues
This would also resolve this issue: https://github.com/angular/components/issues/14117
### Use Case
- Prevent drags from starting on specific child elements
- Implement custom handle logic without using cdkDragHandle
- Add conditional drag start behavior based on application state
- Implement complex touch gesture requirements
Contributor guide
Research direction
Start by locating the CdkDrag directive and its existing drag-start path, then read how cdkDragHandle and mouse/touch events are handled. The implementation should evaluate cdkDragStartPredicate before the drag sequence begins, allowing the drag for true and preventing it for false; verify both mouse and touch behavior and compatibility with cdkDragHandle.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100