使用RXjs进行拖放

问题描述：

我正在使用RXJS进行拖放操作。我想在鼠标放下250ms后拖动一个元素，以便在该元素上不劫持点击事件。使用RXjs进行拖放

到目前为止，开始拖动工作，但停止拖动永远不会被调用。有人知道为什么

let button = document.querySelector('.button'); 

let mouseDownStream = Rx.Observable.fromEvent(button, 'mousedown'); 
let mouseUpStream = Rx.Observable.fromEvent(button, 'mouseup'); 

let dragStream = mouseDownStream 
    .flatMap((event) => { 
    return Rx.Observable 
     .return(event) 
     .delay(250) 
     .takeUntil(mouseUpStream) 
    }); 

let dropStream = mouseUpStream 
    .flatMap((event) => { 
    return Rx.Observable 
     .return(event) 
     .skipUntil(dragStream) 
    }); 

dragStream.subscribe(event => console.log('start drag')); 
dropStream.subscribe(event => console.log('stop drag'));

JSBin

答

我已经更新了你的代码样本，使其运行，我所做的：

与switchMap S（switchMap是flatMapLatest的别名）交换flatMap小号这将确保它只需要最新的事件，并且在发生新事件的情况下，它将取消任何旧的子事件=>在这种情况下，flatMap可能工作正常，但使用switchMap，als更安全拇指OA规则：当有疑问：使用switchMap
dropStream基于/的dragStream发起现在
删除skipUntil，这是一个赛车条件的问题，因为这将在未来dragStream发射后后已经首先触发一些mouseUp事件（这将在需要的时间旅行回到）
交换鼠标松开目标从button到document（更便利-的事情，并没有真正必不可少的东西，同时工作）

let button = document.querySelector('.button'); 
 

 
let mouseDownStream = Rx.Observable.fromEvent(button, 'mousedown'); 
 
let mouseUpStream = Rx.Observable.fromEvent(document, 'mouseup'); 
 

 
let dragStream = mouseDownStream 
 
    .switchMap((event) => { 
 
    return Rx.Observable 
 
     .return(event) 
 
     .delay(250) 
 
     .takeUntil(mouseUpStream) 
 
    }); 
 

 
let dropStream = dragStream 
 
    .switchMap(() => mouseUpStream.take(1)) 
 

 
dragStream.subscribe(event => console.log('start drag')); 
 
dropStream.subscribe(event => console.log('stop drag'));

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<button class="button">Button</button> 
 
</body> 
 
</html>

谢谢你的回答！它仍然无法按预期工作。这是你第一次拖放。之后，当点击按钮时，停止拖动每次都会被记录下来 – bjorkblom

诚然，我错过了 - 但通过添加一个'.take（1）' - 这是一个非常明显的解决方法 - 任何人都可以看到;-) – olsn

使用RXjs进行拖放

相关推荐