rxjs6 でクリックとドラッグを識別する

TL;DR

サンプルコード があるのでそれでだいたい分かると思う。

はじめに

同じ DOM に対して クリック処理とドラッグ処理をさせたいときってありますよね?

rxjs6 ならそこそこ楽に書けますよ。

実装

まずこちらの html と css を用意して

#sample に対するクリックとドラッグの識別をやってみます。

具体的には ドラッグ開始クリック を識別します。それぞれ以下と定義します。
1. ドラッグ開始 … マウスが押されてから一定時間押しっぱなしであること
2. クリック … マウスが押されてから一定時間にマウスが離されること
上記処理の 早く発火した方 を拾うことができればいいわけです。

まず source のストリームを作ります。

1. 2. をそれぞれ of(e).pipe(delay(200))fromEvent(el, 'mouseup') と実装しています。
これらのストリームを merge して first で早く発火したほうを次へ流します。
最後に share で以降のドラッグとクリックの subscribe で同一のストリームを受け取るようにします。

続いて subscribe の実装ですが、e.type === 'mouseup' でクリックかドラッグ開始か判別しています。
あとは煮るなり焼くなりしてみてください。

まとめ

ね、簡単でしょう?


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください