RXJS拖放onDrop/onDragOver

我試圖通過使用RXJS進行拖放操作。RXJS拖放onDrop/onDragOver

有沒有人知道如何正確使用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) 
         ] 
         ); 
       });

這是另一個嘗試，這似乎是工作。但是，每當mouseup發生時它都會觸發，不僅在拖動之後觸發。

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

來源

2017-04-19 E Ma

我做了一些hackings。得到它的工作。但不知道這是否是正確的方法。仍歡迎任何職位或建議。謝謝！ –

如果你想擁有你所有拖動事件，您可以在這裏使用這個

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$));

您想要相同，但也支持觸摸嗎？沒問題！只需將您的三個輸入流與他們的觸摸對象合併，即可。

我希望這回答了你的問題，

本

來源

2018-01-10 21:40:42 Bene

RXJS拖放onDrop/onDragOver

回答

相關問題