feat(drag-drop): New Optional Input [cdkDragStartPredicate]
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
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.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100