angular / angular/components

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

Đang mở
#30,101 6 bình luận 2 reaction 0 người được giao Xem trên GitHub
area: cdk/drag-drop feature P4
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

## 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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.