Are mousemove events disabled while dragging an element?

user_2284202 0
Viewed 5581

I'm trying to move an element by watching mousemove events on the document while the element is being dragged (using html5 drag and drop). I added a mousemove listener on the document on a parent element that fires whenever I move my mouse, but once I start dragging another child element I stop seeing mousemove events and once I stop dragging I see the events again. I don't see it anywhere in the API (https://developer.mozilla.org/en-US/docs/Web/Events/mousemove) that dragging disables these events, but I can't tell how I could be stopping them from my code. Is this just part of html5 drag and drop that it disables the mousemove events while dragging?

I am using angular2 to detect mousemove. I've tried two different ways:

1)

@HostListener('document:mousemove', ['$event'])
    onMouseMove(event) {
        console.log('Global mousemove: ', event);
    }

2)

constructor(
      public element: ElementRef,
      private renderer: Renderer2) {
        element.nativeElement.draggable = true;
      }
this.mouseMoveListener = this.renderer.listen('document', 'mousemove', this.onMouseMove.bind(this));
angular drag-and-drop
4 Answers

You can use a pointermove event, that does the job ;)

user_49361680

You're right, mousemove events are disabled while an element is being dragged. You need to listen to a drag event instead (or perhaps to both mousemove and drag, depending on what you need). The drag event works even with a global handler.

document.addEventListener('drag', (e) => console.log(e.clientX, e.clientY))

You can test this with a dummy draggable element:

<div draggable>Test</div>
user_3889940

You can manually dispatch one element(b)'s mousemove event (whitch is not dispatched automatically) when dragging another element(a)

a.addEventListener('dragover', e => {
    b.dispatchEvent('mousemove', e)
})

The dragover event gets a DragEvent, and the mousemove event gets a MouseEvent. The former inherits from the latter, so I think it's OK to pass DragEvent to mousemove event handler

user_197653580
Related