Ability to delay dragging event by X milliseconds

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

[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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}