RxJs: Drag and Drop example : add mousedragstart

Question

How to implement a mousedragstart Observable using the Drag and Drop RxJs\'s example.

mousedragstart should be emit before the first

Answer 1

It should be something as simple as

var mousedragstart = mousedown.flatMap(() => mousemove.takeUntil(mouseup).take(1));

But it isn't. Chrome raises a mousemove event immediately after mousedown, which will cause the above logic to incorrectly yield an element before the user actually starts dragging. So you actually need something like:

var mousedragstart = mousedown.flatMap(() =>
      mousemove
         .where(x => x.movementX !== 0 || x.movementY !== 0)
         .takeUntil(mouseup)
         .take(1)
);