スワイプ（$swipe）を実装する

AngularJSでスワイプ（$swipe）を実装する方法についてです。

こちら（Menu Slideout Demo）が非常に参考になりました。

メニューの開閉やタブの表示切替などで利用したい時があるので、色々とコードを残しておこうと思いましたが、汎用性がなく、ほとんど上記サイトの流用だったので、ここではngTouchの導入と$swipeで利用できるイベントだけ書いておきます。

まず、AngularJSでスワイプ操作を実装するためには、ngTouchモジュールをアプリケーションに組み込みます。

CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.x.x/angular-touch.min.js"></script>

JavaScript

var myApp = angular.module('exampleApp', ['ngTouch']);

JavaScript

myApp.controller('exampleCtrl', function ($scope, $swipe) {
    var menuElement = angular.element(".example-menu");
    $swipe.bind(menuElement, {
        start: function (coords, event) {
            // スワイプ開始
            console.log("swipe-start x:" + coords.x + " y:" + coords.y);
        },
        end: function (coords, event) {
            // 最終的なスワイプの方向を算出して、向きに応じた処理を実施する
            console.log("swipe-end x:" + coords.x + " y:" + coords.y);
        },
        move: function (coords, event) {
            // スワイプ操作に連動して要素を動かす
            console.log("swipe-move x:" + coords.x + " y:" + coords.y);
        },
        cancel: function (coords, event) {
            // 開始前の状態にリセット
            console.log("swipe-cancel x:" + coords.x + " y:" + coords.y);
        }
    });
});

スワイプ操作と連想して要素を動かす場合、moveイベントでスワイプ開始時のx,y座標と比較を行い、transform: translate3d(x,y,z);を設定します。

HTML

<div ng-controller="exampleCtrl">
    <div class="example-menu">
        ...
    </div>
</div>

• AngularJS: API: $swipe
• Menu Slideout Demo