パーツ番号 08-11-09 ・ JavaScript使用
スワイプ拒否バウンスバック
カードを左右にドラッグして離すと、弾力のあるアニメーションで元の位置に跳ね返ります。WordPressのスワイプ操作が受理されなかった時の拒否フィードバックに使えます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。