RXJSドラッグアンドドロップonDrop/onDragOver

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

すべてのあなたのドラッグイベントを持っているしたい場合は、これはあなたが「ドラッグ」しながら、トリガされたすべてののMouseMoveイベントを放出する、ここで

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

をこれを使用することができます。

あなたのニーズに合わせるのも非常に簡単です。

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

同じようにしたいと思いますが、タッチもサポートしていますか？問題ない！あなたの3つの入力ストリームをそれらのタッチ同等物とマージするだけでよいです。

私はいくつかのハッキングをした

ベン