Resizable Box (Drag Handle)
JavaScript
Medium
2 views
Problem Description
You have a box #box and a handle #handle in its bottom-right corner. On dragging handle, resize the box (width/height) with minimum 100px.
Output Format
No output (DOM change).
Constraints
Assume #box and #handle exist and handle is inside box.
Official Solution
const box=document.getElementById('box');const handle=document.getElementById('handle');let startX=0,startY=0,startW=0,startH=0,drag=false;handle.addEventListener('mousedown',e=>{drag=true;startX=e.clientX;startY=e.clientY;const r=box.getBoundingClientRect();startW=r.width;startH=r.height;e.preventDefault();});document.addEventListener('mousemove',e=>{if(!drag)return;const w=Math.max(100,startW+(e.clientX-startX));const h=Math.max(100,startH+(e.clientY-startY));box.style.width=w+'px';box.style.height=h+'px';});document.addEventListener('mouseup',()=>{drag=false;});
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!