← 動的パーツギャラリーへ戻る

パーツ番号 08-11-09 ・ JavaScript使用

スワイプ拒否バウンスバック

カードを左右にドラッグして離すと、弾力のあるアニメーションで元の位置に跳ね返ります。WordPressのスワイプ操作が受理されなかった時の拒否フィードバックに使えます。

mobiledragjs

プレビュー

ソースコード

HTML

<div class="d08-11-09-track">
          <div class="d08-11-09-card" tabindex="0" aria-label="左右にドラッグしてみてください(離すと戻ります)">
            <span>左右にスワイプ</span>
          </div>
        </div>

CSS

.d08-11-09-track{position:relative;width:100%;max-width:230px;height:70px;display:flex;align-items:center;justify-content:center;background:#f3f4f8;border-radius:14px;overflow:hidden}
        .d08-11-09-card{width:80%;height:50px;border-radius:10px;background:#fff;border:1.5px solid #e2e2e8;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#2a2d3a;cursor:grab;touch-action:pan-y;user-select:none}
        .d08-11-09-card.is-dragging{transition:none;cursor:grabbing}
        .d08-11-09-card.is-bounce{transition:transform .5s cubic-bezier(.34,1.7,.4,1)}

JavaScript

(function(){
        var card=document.querySelector('#item-08-11-09 .d08-11-09-card');
        if(!card)return;
        var startX=0,curX=0,dragging=false;
        var LIMIT=70;
        function setX(x){card.style.transform='translateX('+x+'px)';}
        function onDown(e){
          dragging=true;
          startX=(e.touches?e.touches[0].clientX:e.clientX);
          card.classList.add('is-dragging');card.classList.remove('is-bounce');
        }
        function onMove(e){
          if(!dragging)return;
          var x=(e.touches?e.touches[0].clientX:e.clientX);
          var dx=x-startX;
          if(dx>LIMIT)dx=LIMIT+(dx-LIMIT)*0.2;
          if(dx<-LIMIT)dx=-LIMIT+(dx+LIMIT)*0.2;
          curX=dx;
          setX(dx);
        }
        function onUp(){
          if(!dragging)return;
          dragging=false;
          card.classList.remove('is-dragging');
          card.classList.add('is-bounce');
          setX(0);
          curX=0;
        }
        card.addEventListener('mousedown',onDown);
        card.addEventListener('touchstart',onDown,{passive:true});
        document.addEventListener('mousemove',onMove);
        card.addEventListener('touchmove',onMove,{passive:true});
        document.addEventListener('mouseup',onUp);
        card.addEventListener('touchend',onUp);
        card.addEventListener('touchcancel',onUp);
      })();

クラス名 .d08-11-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。