观察者检查 mousemove 何时停止

Question

我想在鼠标移动结束时在 mouseDown 观察器中执行函数。但是当我放下鼠标时，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

如果要检测拖动事件结束，a.k.a。放下，然后像这样的东西应该可以解决问题：

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

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

如果最外层函数假设每次拖动完成时 return 一个值，您需要将拖动完成转换为最外层可观察对象的 "onNext" 事件。

观察者检查 mousemove 何时停止

Observer check when mousemove stops

javascript

observers