Observable fromEvenet mouseupが正しくない

Question

このコードでは、青い線を左右にドラッグして2つのコンテンツを分割することができます。 問題は、私がマウスを押さえてすぐに両脇に移動してマウスを放すと、それはまだ有効です。

だから、take untilは私が推測することはできませんか、それとも他の問題がありますか？

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 1

だから、問題は、あなたは、あなたの.Containerである親にのmouseupイベントをリッスンしているされていますが、すぐに左にするか、コンテナの外に出ることを右のようにどちらかにマウスを移動するとし、あなたがマウスをリリースすると、mouseupイベントはそこに登録され、.Containerには登録されません。

これを修正する方法の1つは、ページ全体のマウスアップを聞くことができます。

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

私が期待どおりに動作しているビットは、ここにJsbin