Rxjs: Drag And Drop Example : Add Mousedragstart

How to implement a mousedragstart Observable using the Drag and Drop RxJs's example. mousedragstart should be emit before the first mousedrag after a mousedown until the mouseup.

Solution 1:

Building on my previous, not-addressing-the-root-problem answer, and the information you've provided, we conceptually have things defined as follows:

var dragTarget = document.getElementById('dragTarget');

var mouseup   = Rx.Observable.fromEvent(document,   'mouseup');
var mousemove = Rx.Observable.fromEvent(document,   'mousemove');
var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown');

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

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

The problem here is the overlap between the events; in terms of relationship to the underlying events, dragstart is triggered by EXACTLY the same thing as the first dragmove. In this case, order of subscription will determine order of execution, which, as you've said, isn't something you want to rely on. To address this, we must take control of the underlying events.

Here's a simple function that takes an observable and returns an array containing two observables which will be issued the same values as the original observable but in which the events will always be passed to the first observable before the second observable, regardless of which is subscribed to first:

functionprioritize(s$) {
  var first = newRx.Subject();
  var second = s$.do(x => first.onNext(x)).share();

  return [
    Rx.Observable.using(
      () => second.subscribe(() => {}),
      () => first
    ),
    second
  ];
}

From there, we can replace the appropriate parts above with something like this:

var mousedowns = prioritize(mousedown);

var dragstart = mousedowns[0].flatMap(() =>
 mousemove
   .where(x => x.movementX !== 0 || x.movementY !== 0)
   .takeUntil(mouseup)
   .take(1)
);

var dragmove = mousedowns[1].flatMap(() =>
  mousemove
    .where(x => x.movementX !== 0 || x.movementY !== 0)
    .takeUntil(mouseup)
);

dragmove.subscribe(() =>console.log('dragmove'));
dragstart.subscribe(() =>console.log('dragstart'));

Here's the whole thing working:

https://jsbin.com/qodilerofe/edit?js,console,output

Solution 2:

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)
);

Solution 3:

An alternative solution for drag and drop:

let dragDiv = document.getElementById('drag');
let mouseisdown = false;
let startPos;

Observable.fromEvent(dragDiv, "mousedown").subscribe((e) => {
    mouseisdown = true;
    startPos = { x: e.offsetX, y: e.offsetY}
});
Observable.fromEvent(document, "mouseup").subscribe(e => mouseisdown = false); 


Observable
    .fromEvent(document, "mousemove")
    .filter(e => mouseisdown)
    .map((e) => {
        return   {
          left: e.clientX - startPos.x,
          top: e.clientY - startPos.y
        }
    })
    .subscribe( p => {
    dragDiv.style.top = p.top + "px";
    dragDiv.style.left = p.left + "px";
});

The typescript version:

let dragDiv = document.getElementById('drag');
let mouseisdown = false;
let startPos;

Observable.fromEvent(dragDiv, "mousedown").subscribe((e:MouseEvent) => {
    mouseisdown = true;
    startPos = { x: e.offsetX, y: e.offsetY}
});
Observable.fromEvent(document, "mouseup").subscribe(e => mouseisdown = false); 


Observable
    .fromEvent(document, "mousemove")
    .filter(e => mouseisdown)
    .map((e:MouseEvent) => {
        return   {
          left: e.clientX - startPos.x,
          top: e.clientY - startPos.y
        }
    })
    .subscribe( p => {
    dragDiv.style.top = p.top + "px";
    dragDiv.style.left = p.left + "px";
});