Observer check when mousemove stops

Question

I want to execute function when a mouse move ends inside mouseDown Observer. But onComplete function doesn't execute, when i letdown my mouse. Any suggestions?

var split = $('.drag');
var parent = $('.Container');

var mouseDowns = Rx.Observable.fromEvent(split, "mousedown");
var parentMouseMoves = Rx.Observable.fromEvent(parent, "mousemove");
var parentMouseUps = Rx.Observable.fromEvent(parent, "mouseup");

var drags = mouseDowns.flatMap(function(e){
   return parentMouseMoves.takeUntil(parentMouseUps);
});

drags.subscribe(
   function(e) {
     var $containerWidth = $('.Container').width();
     var clientX = $containerWidth - e.clientX;

     if (clientX >= 50 && e.clientX >= 50) {
        $('.left').css('right', clientX);
        $('.right').css('width', clientX);
      }
    },
    function(error) {
        console.log(error);
    },
    function() {
        console.log('finished');
    });

jsbin.com url

Answer 1

If you want to detect drag event end, a.k.a. drop, then something like this should do the trick:

var drop = mouseDowns.selectMany(
  Rx.Observable.concat([
    parentMouseMoves.take(1).ignoreElements(),
    parentMouseUps.take(1)
  ])
);

drop.subscribe(function(e) {
  console.log('finished');
});

If the outer-most function is suppose to return a value each time a drag completes, you need to convert the drag completion into an "onNext" event for the outer-most observable.