jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

スマートフォンで上下左右のどちらにスワイプしたのかを得る

2015年8月31日
この記事は掲載から754日経過しています。
情報が古い可能性が有りますのでご了承下さい

以前スワイプ操作を得て画像をスライドするサンプルを作って見ましたが、今回は上下左右のどちらにスワイプしたかを得るサンプルを作ってみました。

先ずは移動距離を得てみる

QR1

タッチパネル搭載のパソコンやスマートフォン等でご覧下さい。

サンプルはタップした位置を起点とし、X、Yのどちらにどれだけ移動したかを数値で得ています。また、起点からの距離を計算し、どれだけ移動したのかも同時に得ていますが、起点より戻る場合はマイナス数値になるので、これをプラスにしています。

移動した距離から、上下左右のどちらに移動したのかを得る

移動した距離を得る事が出来たので、後はどちらに移動したかを得るだけです。

QR2

タッチパネル搭載のパソコンやスマートフォン等でご覧下さい。

先ず、最初にタップした位置からどちらに移動したのかは、移動した位置からタップした位置を引いた値がマイナスなら左へスワイプ(上へスワイプ)と判断出来るので、これをセットします。

次に、比較する際に数値がマイナスだと面倒なので、これをプラスにし、移動距離によって上下なのか左右なのかを判断します。ただ、指って必ずしもまっすぐにはスワイプしてくれないので、遊びが出ます。その遊びを50未満とし、50以上の移動があった方を縦、横のスワイプ方向としています。

ということから、斜め上に向けてスワイプしたりすると、正確な判断が出来ません。制度を上げるのであれば、XとYの両方の数値を確認し、その差によって処理するか否か、或いは数値が多い方を優先するかなど判断していけば良いかと思います。

こういう下地があれば、後は算数の問題になり、簡単なマウスジェスチャーというかスワイプジャスチャー?的なものをスマートフォンサイトに実装する事が出来ますね。例えば、左からメニューバーを出したりなど。ただ、最近のブラウザは、それそのものにジェスチャーがあるので、工夫は必要かなぁと思います。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP