feat(drag-drop): New Optional Input [cdkDragStartPredicate]
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
## 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
コントリビューションガイド
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- 機能追加
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100