mousemoveが停止したときのオブザーバチェック

Question

mouseDown Observer内でマウスの移動が終了したときに関数を実行したい。しかし、マウスをレットダウンすると、onComplete関数は実行されません。助言がありますか？

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

ドラッグイベント終了を検出したい場合は、別名ドロップ、その後、このようなものは、トリックを行う必要があります。

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

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

最も外側の関数が返すと仮定した場合ドラッグが完了するたびに値を取得するには、ドラッグ完了を、最も外側に観測可能な「onNext」イベントに変換する必要があります。