【jQuery】フリックの条件分岐について教えていただきたいです

jQueryでフリックの実装をしているのですが、画像を右から左に（左から右に）半分以上動かしたら画像が動くという処理が上手く書けないため質問させていただきました。
指を離したときの条件分岐をどのように書けべ良いかを教えていただけると幸いです。
参考にした記事

やってみたこと

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<div class="swipe-photo">
14    <ul class="swipe-photo-container clearfix">
15        <li class="swipe-photo-item"><img src="img/0.jpg" class="swipe-photo-thumbnail"></li>
16        <li class="swipe-photo-item"><img src="img/1.jpg" class="swipe-photo-thumbnail"></li>
17        <li class="swipe-photo-item"><img src="img/2.jpg" class="swipe-photo-thumbnail"></li>
18        <li class="swipe-photo-item"><img src="img/3.jpg" class="swipe-photo-thumbnail"></li>
19        <li class="swipe-photo-item"><img src="img/4.jpg" class="swipe-photo-thumbnail"></li>
20        <li class="swipe-photo-item"><img src="img/5.jpg" class="swipe-photo-thumbnail"></li>
21    </ul>
22</div>
23<script type="text/javascript" src="js/jquery.js"></script>
24<script type="text/javascript">
25/**
26  * （説明）
27  * @type {number} slideWidth ← .swipe-photo-itemの幅を取得して代入
28  * @type {string} slideNum ← .swipe-photo-itemの数を取得して代入
29  * @type {number} slideSetWidth ← .swipe-photo-itemの幅×数で求めた値を代入
30  * @type {number} slideCurrent ← 現在地を示す変数
31  * @type {string} deirection ← スワイプしたときの方向
32  * @type {string} position ← 横方向の座標の変数
33  *
34  *
35  *
36**/
37
38$(function(){
39  var flickStart, flickMove, flickEnd;
40
41  $(".swipe-photo-item").on({
42    "touchstart": function(event){
43      flickStart(event);
44    },
45    "touchmove": function(event){
46      flickMove(event);
47    },
48    "touchend": function(event){
49      flickEnd(event);
50    }
51  });
52
53  (function(){
54    var slideWidth = $('.swipe-photo-item').outerWidth();
55    var slideNum = $('.swipe-photo-item').length;
56    var slideSetWidth = slideWidth * slideNum;
57    var slideCurrent = 0;
58
59    // .swipe-photo-containerのスタイルシートにwidth: 上の変数を指定
60    $('.swipe-photo-container').css('width', slideSetWidth);
61
62    // タッチイベントの処理内容
63    flickStart = function flickStart(event){
64	// フリック開始時のX軸の座標
65	startX = event.changedtTouches[0].pageX;
66    }
67
68
69    flickMove = function flickMove(event){
70	// フリック終了時のX軸の座標
71	endX = event.changedTouches[0].pageX;
72	
73	// フリックの移動距離 = フリック開始時の座標 - フリック終了時の座標
74	diffX = Math.round(startX - endX);
75    }
76
77    // 指を離したときの処理
78    flickEnd = function flickEnd(event){
79      if (diffX < slideWidth/2){ // 右から左にフリックしたサムネイル画像の移動距離が半分を超えたら左に移動
80	左にスライドする処理
81	sliding();
82     } else if(diffX > slideWidth/2){ // 左から右にフリックしたサムネイル画像の移動距離が半分を超えたら右に移動
83	右にスライドする処理
84	sliding();
85     }
86   }
87
88    // アニメーションを実行する即時変数
89    var sliding = function sliding(){
90      // slideCurrentが0以下の場合
91      if(slideCurrent<0){
92        slideCurrent = 0;
93
94      // slideCurrentがslideNumを超えたら
95      }else if(slideCurrent > slideNum - 1){
96        slideCurrent = 5;
97      }
98      $('.swipe-photo-container').animate({
99        left: slideCurrent * -slideWidth
100      });
101    }
102
103
104    // 横方向の座標を取得
105    getPosition = function getPosition(event){
106      return event.originalEvent.changedTouches[0].pageX;
107    }
108  })();
109});
110</script>

動作する仕様書に書いてあるJavaScript

script
1$(function(){
2	  var h=$(".swipe-photo-thumbnail").width(),
3	  a=$(".swipe-photo-item").length,
4	  k=[],
5	  d={x:undefined,thisX:undefined,startX:undefined,moveX:undefined};
6
7
8	  for(var c=0; c<=a; c++){
9	    k[c] = -c*h
10	  }
11
12
13	  $(".swipe-photo-container").width(h*a);
14
15
16	  // 指に触ったときの処理
17	  $(".swipe-photo-item").on({touchstart:function(event){
18	    d.thisX=parseInt($(".swipe-photo-container").css("left"));
19	    d.startX=event.originalEvent.changedTouches[0].pageX-d.thisX
20	  },
21
22
23	  // 指を動かしてるときの処理
24	  touchmove:function(event){
25	    event.preventDefault();
26	    d.x=event.originalEvent.changedTouches[0].pageX;
27
28	    if(d.x-d.startX >= 0){
29	            d.moveX=0
30	    }else{
31	      if(d.x-d.startX <= k[a-1]){
32	        d.moveX=k[a-1]
33	      }else{
34	        d.moveX = d.x-d.startX
35	      }
36	    }
37	    $(".swipe-photo-container").css({left:d.moveX})
38	  },
39
40
41	  // 指を離したときの処理
42	  touchend:function(n){
43	    var m = "";
44
45	    for(var l=0; l<a; l++){
46	      if(k[l]+(h/2) > d.moveX && d.moveX >= k[l+1]+(h/2)){
47			m=l
48		  }
49		}
50
51
52	    $(".swipe-photo-container").animate({
53	      left:k[m]
54	      },400)}
55	    })
56    });

行動規範の内容に同意します

回答1件

もう退会されて見てないみたいですが、せっかく書いたので。

js
1diffX = Math.round(startX - endX);

となっていますから、diffXは右→左の時に正の数、左→右の時に負の数になるはずです。
一方で条件文は、

js
1if (diffX < slideWidth/2){ // 右から左にフリックしたサムネイル画像の移動距離が半分を超えたら左に移動
2  //...
3} else if(diffX > slideWidth/2){ // 左から右にフリックしたサムネイル画像の移動距離が半分を超えたら右に移動
4  //...
5}

となっており、slideWidth/2は正の数でしょうから、左から右にフリックした時にdiffX > slideWidth/2が成立することはないだろうと思います。

解決方法ですが、フリック移動量についてはdiffXの絶対値とslideWidth/2との比較をし、フリック方向についてはdiffXの符号で判断する、というのがいいのではないかと思いました。

なお、些末なことですが、このやり方で判別できるのは「フリック」ではなくて「スワイプ」だと思います。

投稿2019/12/20 00:39

Lhankor_Mhy

総合スコア36946

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

【jQuery】フリックの条件分岐について教えていただきたいです

やってみたこと

動作する仕様書に書いてあるJavaScript

関連した質問