• 概要
• bind()

概要

$swipeサービスは、ホールド&ドラッグのスワイプの曖昧な振る舞いを抽象化するサービスで、 スワイプに関係するディレクティブをより便利にしてくれます。

ngTouchのインストールが必要になります。

$swipeはngTouch内のngSwipeLeftとngSwipeRightのディレクティブで使用され、 ngCarouselによってコンポーネントが分離されています。

使用方法

$swipeサービスは、bindのメソッドのみを持つオブジェクトです。 bindはスワイプのための監視対象とする要素を取得する、 4つのハンドラ関数を持つオブジェクトです。 詳細は、下記のbindの説明を確認してください。

bind()

$swipeの主となるメソッドです。 スワイプモーションの監視対象となる要素を取得する、イベントハンドラを含むオブジェクトです。

4つのイベントとは、start、move、end、cancelです。 start、move、endは、{ x: 150, y: 310 }のような形式の座標オブジェクトを引数として受け取ります。

startは、mousedownまたはtouchstartのどちらかで呼び出されます。 このイベントの後に、$swipeはtouchmoveまたはmousemoveイベントを待ち受けるようになります。 いずれかの方向の移動距離の合計が最低限のしきい値を超えるまで、これらのイベントは無視されます。

このしきい値を超える度に、水平または垂直どちらの移動距離が大きいか判定処理されます。

• もし、水平方向の移動距離の方が大きければ、これはスワイプであると判定され、moveとendイベントが後に続きます。
• もし、垂直方向の移動距離の方が大きければ、これはスクロールであると判断され、処理をブラウザに引き継がせ、 キャンセルイベントが送られます。

moveは、上記のロジックでスワイプが進行中であると判定処理された後にmousemoveとtouchmoveで呼び出されます。

endは、touchendまたはmouseupでスワイプの完了が成功した際に呼び出されます。

cancelは、ブラウザからtouchcancelとされた、または上記の説明でスクロールとされた際のどちらかの場合に呼び出されます。

 Back to top