$mdGesture: problems with drag events

[chenlijun99]

Bug

By registering a event listener with this:

$mdGesture.register(element, 'drag', { horizontal: true });

I encountered following problems:

• Texts get selected when dragging over them. This means that after the "$md.dragend", I won't be able to initialize another "$md.dragstart" since there is some text selected.
• When I try to drag in mobile emulation and the pointer is over a text block, when "$md.drag" event is triggered only few times or even not triggered at all.

What is the expected behavior?

• Text selection should be prevented when dragging
• Mobile drag should work even on text block

What is the current behavior?

• Text selection when dragging isn't prevented
• Dragging over text blocks in mobile doesn't work as expected

CodePen and steps to reproduce the issue:

CodePen Demo which shows your issue:

Detailed Reproduction Steps:

• Try to press the mouse and start dragging. Go over the text block. Some text is selected.
  Release the mouse and try to drag again.
• Go in mobile simulation mode and try to drag with the pointer over the text-block.
  "$md.drag" is fired only few times.

Note: the number is the yellow area represents the times "$md.drag" is fired.

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

Which versions of AngularJS, Material, OS, and browsers are affected?

Angular material 1.1.8
Angularjs 1.6.9
Google Chrome Version 63.0.3239.108 (Official Build) (64-bit)

Is there anything else we should know? Stack Traces, Screenshots, etc.

[Splaktar]

Have you tried the following?

      angular.module('MyApp', ['ngMaterial', 'ngMessages'])
      .config(function($mdGestureProvider) {
        // For mobile devices without jQuery loaded, do not
        // intercept click events during the capture phase.
        $mdGestureProvider.skipClickHijack();
      });

[chenlijun99]

I've added it to the CodePen.
It still doesn't work though.

[Splaktar]

OK, thanks for giving it a shot.