Elīna Legzdiņa Elīna Legzdiņa - 28 days ago 6
HTML Question

Observable fromEvenet mouseup is not accurate

With this code you can drag blue line to right and left, splitting two contents.
The problem is if I hold down my mouse and quickly move to one of the sides and let go my mouse, it still is active.

So the take until doesn't execute I guess, or there an other problem with this?

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


jsbin.com

Answer

So the problem is you are listening mouseup event only on parent which is your .Container but when you quickly move your mouse either to the left or right such that it goes out of the Container and you release you mouse, the mouseup event is registered there and not on the .Container.

One way to fix this you can listen for the mouseups on the entire page.

//....
var parentMouseMoves = Rx.Observable.fromEvent(parent, "mousemove");
var parentMouseUps = Rx.Observable.fromEvent($('html'), "mouseup");
//....

I've modified your code a bit which is working as expected, check it here Jsbin