angular / angular/components

feat(drag-drop): New Optional Input [cdkDragStartPredicate]

Ouverte
#30,101 6 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
area: cdk/drag-drop feature P4
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.