Question

我试图通过使用RXJS进行拖放操作。

有人知道如何使用RXJS正确地执行onDrop或onDragOver吗？

这是我尝试过的。但不工作......

let mouseup = Observable.fromEvent(document, 'mouseup');
            let mousemove = Observable.fromEvent(document, 'mousemove');
            let mousedown = Observable.fromEvent(target, 'mousedown');
const drop = mousedown
                .flatMap((md) => {
                    return Observable
                        .concat(
                        [
                            mousemove.take(1).ignoreElements(),
                            mouseup.take(1)
                        ]
                        );
                });

这是另一种尝试，似乎有效。但是每当鼠标发生时它都会触发，而不仅仅是在拖拽后发射。

const drop = mousemove
                .switchMap((mm) => mouseup.take(1));

Answer 1

如果您想拥有所有拖动事件，可以在此处使用

let up$   = Observable.fromEvent(document, 'mouseup');
let move$ = Observable.fromEvent(document, 'mousemove');
let down$ = Observable.fromEvent(document, 'mousedown');

let drag$ = down$.switchMap(down => move$.takeUntil(up$));

这将发出您在'拖动'时触发的每个mousemove事件。

它也很容易适应您的需求。假设您需要拖动的x距离：

let distance$ = down$.switchMap((down: MouseEvent) => 
                          move$.map((move: MouseEvent) => (move.clientX - down.clientX))
                      .takeUntil(up$));

你想要一样，还要支持触摸？没问题！只需将您的三个输入流与其触摸等效项合并，就可以了。

我希望这能回答你的问题，

本

RXJS拖放onDrop / onDragOver

1 个答案: