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

パーツ番号 08-15-07 ・ JavaScript使用

弾性ドラッグハンドルパネル

下部ハンドルをドラッグして離すと、開閉位置にオーバーシュートしながら弾むように収まります。WordPressのボトムシートや在庫確認パネルに使えます。

dragjsoverlay

プレビュー

ソースコード

HTML

<div class="d08-15-07-stage">
          <div class="d08-15-07-panel" id="d08-15-07-panel">
            <div class="d08-15-07-handle" id="d08-15-07-handle"><span></span></div>
            <div class="d08-15-07-content">📦 在庫状況<br><b>残り12点</b></div>
          </div>
        </div>

CSS

.d08-15-07{width:100%;display:flex;align-items:center;justify-content:center}
        .d08-15-07-stage{position:relative;width:100%;max-width:230px;height:200px;background:#eef0f7;border-radius:14px;overflow:hidden}
        .d08-15-07-panel{position:absolute;left:0;right:0;bottom:0;height:150px;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -4px 14px rgba(0,0,0,.1);transform:translateY(112px);transition:transform .5s cubic-bezier(.34,1.56,.64,1);touch-action:none}
        .d08-15-07-panel.is-dragging{transition:none}
        .d08-15-07-handle{display:flex;align-items:center;justify-content:center;padding:10px 0;cursor:ns-resize}
        .d08-15-07-handle span{width:36px;height:4px;border-radius:99px;background:#dcdfe6;display:block}
        .d08-15-07-content{padding:4px 18px 16px;font-size:12.5px;font-weight:700;color:#2a2d3a;text-align:center;line-height:1.8}

JavaScript

(function(){
        var root=document.getElementById('item-08-15-07');if(!root)return;
        var panel=root.querySelector('#d08-15-07-panel'),handle=root.querySelector('#d08-15-07-handle');
        if(!panel||!handle)return;
        var OPEN=0,CLOSED=112,dragging=false,startY=0,startTy=CLOSED,curTy=CLOSED;
        handle.addEventListener('pointerdown',function(e){
          dragging=true;startY=e.clientY;startTy=curTy;
          panel.classList.add('is-dragging');
          try{handle.setPointerCapture(e.pointerId);}catch(err){}
        });
        handle.addEventListener('pointermove',function(e){
          if(!dragging)return;
          var dy=e.clientY-startY;
          curTy=Math.min(CLOSED,Math.max(OPEN,startTy+dy));
          panel.style.transform='translateY('+curTy+'px)';
        });
        function end(){
          if(!dragging)return;
          dragging=false;panel.classList.remove('is-dragging');
          curTy=(curTy>CLOSED/2)?CLOSED:OPEN;
          panel.style.transform='translateY('+curTy+'px)';
        }
        handle.addEventListener('pointerup',end);
        handle.addEventListener('pointercancel',end);
      })();

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