Question

我有以下，希望相当标准，使用Angular 2中的Rxjs拖放代码。

blockElement恰好是一个SVG矩形，但我认为这不会对问题产生任何影响。

我需要设置blockElement最终丢弃时的坐标，即mouseup事件在拖动结束时触发。这样，用户可以将其大致放在正确的位置，并且代码可以正确排列其位置。

我可以通过运行函数对takeUntil作出反应来实现吗？或者是否有一些其他Rxjs运算符，我可以通过在拖动结束时运行函数来对mouseup作出反应？

（为了清晰起见，我已对代码进行了编辑，但实际代码确实有效，因此，如果出现以下任何错误，则该问题不应该与问题相关，希望您能获得主意）

const taskMouseDown$ = Observable.fromEvent(this.blockElement.nativeElement, 'mousedown');
const documentMouseUp$ = Observable.fromEvent(document, 'mouseup');
const documentMouseMove$ = Observable.fromEvent(document, 'mousemove');

const taskMouseDrag$ = taskMouseDown$.flatMap((mouseEvent: MouseEvent) => {
  return documentMouseMove$.map((mouseMoveEvent: MouseEvent) => {
    return ({mouseStart: mouseEvent, mouseCurrent: moveMouseEvent});
  }).takeUntil(documentMouseUp$);
});

taskMouseDrag$.subscribe(
  // Make the block element follow the mouse
});

Answer 1

1）您可以使用do运算符

.takeUntil(documentMouseUp$)
.do(
   () => {}, // next
   () => {}, // error
   () => {   // complete
    alert('mouseup')
   }
 );

或

declare module "rxjs/Observable" {
    interface Observable<T> {
        finish : typeof finish;
    }
}

function finish<T>(this : Observable<any>, fn: () => void): Observable<T> {
    return this.do(() => {}, () => {}, fn);
}

Observable.prototype.finish = finish;

...
.takeUntil(documentMouseUp$)
.finish(() => this.onMouseUp());

<强> Plunker Example

2）或者您可以订阅documentMouseUp$

documentMouseUp$.subscribe(() => console.log('mouseup);

Answer 2

takeUntil在条件满足时终止流，您可以为此传递处理程序：

takeMouseDrag$.subscribe(
  nextHandler, // your move handler
  completeHandler, // this gets triggered when the mouseup triggers the take until
  errorHandler // in case you want to handle errors
}

或在你的情况下：

takeMouseDrag$.subscribe(
  onDrag,
  onDragEnd
)

在Angular 2中使用Rxjs进行反应性拖放结束时的Mouse Up事件

2 个答案: