$mdGesture: problems with drag events

chenlijun99 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

Splaktar commented 6 years ago

OK, thanks for giving it a shot.

angular / material