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

[endlacer]

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

@Input('cdkDragStartPredicate')
dragStartPredicate: ((event: TouchEvent | MouseEvent) => boolean) | undefined;

Example Usage

HTML:

<div cdkDrag [cdkDragStartPredicate]="myDragStartPredicate">
  Draggable content
  <input #input>
</div>

component:

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

[im100ra]

@endlacer you can use cdkDragDisabled to dynamically handle drag and drop action

[im100ra]

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">

  @for (movie of movies; track movie;let index = $index) {
  <div class="example-box" cdkDrag [cdkDragDisabled]="isInputFocused">
    DragBox
    <input value="{{movie}}"  (focus)="isInputFocused = true" 
    (blur)="isInputFocused = false"  />
  </div>
  }
</div>

[endlacer]

@endlacer you can use cdkDragDisabled to dynamically handle drag and drop action

Disabling the drag and drop action is too late in this case:
See: https://stackblitz.com/edit/wc3rt4-cduuoq?file=src%2Fexample%2Fcdk-drag-drop-sorting-example.ts
When you start dragging on the input field the drag starts before it gets disabled.

Also, this is just one possible use case

[endlacer]

@crisbeto does that mean i can build it and do a PR or won't it get added anyway?

[crisbeto]

Feel free to send out a PR for it.

[endlacer]

@crisbeto
sorry to bother, but i have a problem running the tests locally (and also yarn dev-app). yarn build works fine though.
how can i get help, is there a channel or something?

`INFO: Build completed successfully, 7 total actions
ERROR: Error creating runfiles: Failed to create runfiles symlinks: build-runfiles.exe failed: error executing command
cd /d C:\users\andre_bazel_andre\a7swqcex\execroot\angular_material
C:\users\andre_bazel_andre\install\123df92719b107a86cd72886e258fa44\build-runfiles.exe bazel-out/x64_windows-fastbuild/bin/src/cdk/drag-drop/unit_tests_debug.exe.runfiles_manifest bazel-out/x64_windows-fastbuild/bin/src/cdk/drag-drop/unit_tests_debug.exe.runfiles: Process exited with status 1
build-runfiles error: CreateSymbolicLinkW failed:
Bazel needs to create symlinks to build the runfiles tree.
Creating symlinks on Windows requires one of the following:
1. Bazel is run with administrator privileges.
2. The system version is Windows 10 Creators Update (1703) or later and developer mode is enabled.

manifest file name: bazel-out/x64_windows-fastbuild/bin/src/cdk/drag-drop/unit_tests_debug.exe.runfiles_manifest
runfiles base directory: bazel-out/x64_windows-fastbuild/bin/src/cdk/drag-drop/unit_tests_debug.exe.runfiles
: Process exited with status 1
INFO: Build completed successfully, 7 total actions
iBazel [11:59AM]: Error starting process: fork/exec C:\Users\andre\AppData\Local\Temp\bazel_script_path1308474478.bat: %1 ist keine zulässige Win32-Anwendung.
iBazel [11:59AM]: Run start failed fork/exec C:\Users\andre\AppData\Local\Temp\bazel_script_path1308474478.bat: %1 ist keine zulässige Win32-Anwendung.
`