ドラッグリサイズハンドル

<div class="d08-07-07-stage" id="d08-07-07-stage">
          <div class="d08-07-07-box" id="d08-07-07-box" style="width:120px;height:90px">
            <span class="d08-07-07-size" id="d08-07-07-size">120×90</span>
            <span class="d08-07-07-handle" id="d08-07-07-handle"></span>
          </div>
        </div>

.d08-07-07-stage{position:relative;width:100%;height:200px}
        .d08-07-07-box{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#6a5cff,#8b5cf6);border-radius:10px;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(106,92,255,.28);min-width:60px;min-height:50px}
        .d08-07-07-handle{position:absolute;right:3px;bottom:3px;width:14px;height:14px;cursor:nwse-resize;touch-action:none}
        .d08-07-07-handle::before{content:"";position:absolute;inset:0;border-right:2px solid rgba(255,255,255,.8);border-bottom:2px solid rgba(255,255,255,.8);border-radius:0 0 4px 0}

(function(){
        var root=document.getElementById('item-08-07-07');if(!root)return;
        var stage=root.querySelector('#d08-07-07-stage'),box=root.querySelector('#d08-07-07-box'),handle=root.querySelector('#d08-07-07-handle'),size=root.querySelector('#d08-07-07-size');
        if(!stage||!box||!handle)return;
        var dragging=false,startX=0,startY=0,startW=0,startH=0;
        handle.addEventListener('pointerdown',function(e){
          dragging=true;startX=e.clientX;startY=e.clientY;
          startW=box.offsetWidth;startH=box.offsetHeight;
          try{handle.setPointerCapture(e.pointerId);}catch(err){}
          e.stopPropagation();
        });
        handle.addEventListener('pointermove',function(e){
          if(!dragging)return;
          var maxW=stage.clientWidth-box.offsetLeft-4;
          var maxH=stage.clientHeight-box.offsetTop-4;
          var w=Math.min(maxW,Math.max(60,startW+(e.clientX-startX)));
          var h=Math.min(maxH,Math.max(50,startH+(e.clientY-startY)));
          box.style.width=w+'px';box.style.height=h+'px';
          if(size)size.textContent=Math.round(w)+'×'+Math.round(h);
        });
        function stop(){dragging=false;}
        handle.addEventListener('pointerup',stop);
        handle.addEventListener('pointercancel',stop);
      })();