スワイプしてカレンダーを切り替える

スケジュール帳

スケジュール帳のカレンダーを表示しているとスワイプで月を切り替えたくなる。スケジュール帳に実装してみた。タッチ操作のできる端末かブラウザのシミュレーターでアクセスしてくみてください。（ログインIDをお持ちでない方はそのままGUESTでログインしてくださね）

スケジュールカレンダーをフリックして月を切り替える

タッチイベント

• touchstart
  • タッチ面に指が触れた時
• touchmove
  • タッチしながら指を移動させた時
• touchend
  • タッチしていた指を離した時

javascript(jQuery)

       $(function flickSet() {
           // touchstart touchmove touchendのイベントハンドラを登録
           $('.flick').bind("touchstart touchmove touchend",touchHandler);
           function touchHandler(e){
               e.preventDefault();                       // デフォルトの動作をキャンセルする
               var touch = e.originalEvent.touches[0];   // イベントオブジェクトの取得
               if(e.type == "touchstart"){               // 画面に触れたときの x を取得
                   startX = touch.pageX;
               }else if(e.type == "touchmove"){          // タッチしながら移動した距離を取得
                   diffX = touch.pageX - startX;
               }else if(e.type == "touchend"){           // 離した時
                   if(diffX > 50){                       //   左から右へスワイプした時
                       $("#prevMon").click();            //     前月ボタンをクリックする
                   }
                   if(diffX < -50){                      //   右から左にスワイプした時
                       $("#nextMon").click();            //     次月ボタンをクリックする
                   }
               }
           }
       });