使用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

來源

2017-04-12 bjorkblom

我已經更新了你的代碼樣本，使其運行，我所做的：

與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>

來源

2017-04-12 12:30:36 olsn

謝謝你的回答！它仍然無法按預期工作。這是你第一次拖放。之後，當點擊按鈕時，停止拖動每次都會被記錄下來 – bjorkblom

誠然，我錯過了 - 但通過添加一個'.take（1）' - 這是一個非常明顯的解決方法 - 任何人都可以看到;-) – olsn

使用RXjs進行拖放

回答

相關問題