Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
endlacer opened this issue Nov 28, 2024 · 6 comments · May be fixed by #30194
Open

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

endlacer opened this issue Nov 28, 2024 · 6 comments · May be fixed by #30194
Labels
area: cdk/drag-drop feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions

Comments

@endlacer
Copy link

endlacer commented Nov 28, 2024 •
edited
Loading

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
@endlacer endlacer added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Nov 28, 2024
@im100ra
Copy link
Contributor

im100ra commented Nov 28, 2024

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

@im100ra
Copy link
Contributor

im100ra commented Nov 28, 2024 •
edited
Loading 

<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
Copy link
Author

endlacer commented Nov 28, 2024 •
edited
Loading

@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

@crisbeto crisbeto added P4 A relatively minor issue that is not relevant to core functions area: cdk/drag-drop and removed needs triage This issue needs to be triaged by the team labels Dec 2, 2024
@endlacer
Copy link
Author

endlacer commented Dec 5, 2024

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

@crisbeto
Copy link
Member

crisbeto commented Dec 6, 2024

Feel free to send out a PR for it.

@endlacer
Copy link
Author

@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.
`

@endlacer endlacer linked a pull request Dec 17, 2024 that will close this issue
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: cdk/drag-drop feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[feat] drag start predicate endlacer/components_cdk-drag-start-predicate
3 participants
@crisbeto @endlacer @im100ra