Ability to delay dragging event by X milliseconds

[MortPed]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Set property to delay dragging event by X milliseconds
<div cdkDrag cdkDragDelay="2000">Hold for 2 seconds to move this item</div>

What is the current behavior?

No option to prevent dragging on initial touch rendering this very hard to use on mobile.
(This is certainly not helped by the fact that cdkDrag elements disable mobile scroll events)

What is the use-case or motivation for changing an existing behavior?

Currently click events immediately trigger leading to unintended re-ordering. Many sites and native devices solves this issue by not starting the drag event unless user have clicked and hold the object for a short amount of time.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cdk: 7.0.2

[crisbeto]

The CdkDrag directive only starts dragging after a certain threshold, however the default of 5px might too low for a mobile device. You can try to set a different threshold through the CDK_DRAG_CONFIG provider.

[MortPed]

I am not sure this will solve the issue regarding touch devices. As you are scrolling down content it is unfortunate to reorder up random elements, and any amount of distance threshold will not resolve this. I do believe that the fix to #13895 will make the Drag'n'Drop usable for smaller touch devices, but for the next iteration, I still think implementing an optional time-based threshold would make it act more intuitive to the users and make it behave more like native implementations.

[philmtd]

I +1 this idea. I'd also suggest that in that case the px threshold should be bypassed so the user gets the drag preview right after the long-press (without the need to drag) to get immediate feedback that dragging is now enabled.

On the other hand a custom solution could probably be created once #13722 is merged. You'd then just manually need to handle the long-press and after that enable the dragging of that element.

Or you could use separate drag handles that are only active and visible on mobile devices.

[lornz]

+1 this feature.
Right now it is possible to disable drag, so one could just disable it until a certain time (!) threshold is passed. But unfortunately enabling doesn't work reliable, sometimes the dragging starts sometimes not. So I think a built-in time delay (aka longpress) would be very helpful for a lot of use cases.