javascript - 观察者检查鼠标移动何时停止

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”事件。