投稿がだいぶん久しぶりになりましたが、ちょっとメモしておきたい内容があったので投稿します。
Libre10のswipe検知ライブラリとしてjquery.touchswipeを使ってきましたが、反応が遅いのと、時々動かなくなることがあるので、Hammer.jsへ移行することとしました。
Libre10では前後ページへの移動をSwipeで、前後検索結果のページへの移動を2本指swipeで行っているのですが、Hammer.js(2.0)でmultiple finger swipeの実装方法がググってもあまり出てきませんでした。
結果からいうと以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$("#image").hammer(swipeOptions).bind("swipeleft",function(ev){ ev.preventDefault(); nextPage(); }); $("#image").hammer(swipeOptions).bind("swiperight",function(ev){ ev.preventDefault(); lastPage(); }); $("#image").data('hammer').add(new Hammer.Swipe({event:'doubleswipeleft',pointers:2, direction:Hammer.DIRECTION_LEFT})); $("#image").data('hammer').add(new Hammer.Swipe({event:'doubleswiperight',pointers:2, direction:Hammer.DIRECTION_RIGHT})); $("#image").hammer(swipeOptions).bind("doubleswipeleft",function(ev){ ev.preventDefault(); nextSearchPage(); }); $("#image").hammer(swipeOptions).bind("doubleswiperight",function(ev){ ev.preventDefault(); lastSearchPage(); }); |
hammer.jsのjquery plugin使用です。
最初に何らかの処理をbindしてhammerインスタンスを作った上で、addでHammer.Swipeのdouble finger版を追加して、2本指処理を記載してます。
拍子抜けするほど単純ですが、結構ネットで探しても見つからなかったので書いておきました。