| 66 | })[0]; |
| 67 | |
| 68 | const handleResize = () => { |
| 69 | if (draggableInstanceRef.current) { |
| 70 | draggableInstanceRef.current.update(); |
| 71 | |
| 72 | const currentX = gsap.getProperty(target, 'x'); |
| 73 | const currentY = gsap.getProperty(target, 'y'); |
| 74 | |
| 75 | const boundsRect = boundsEl.getBoundingClientRect(); |
| 76 | const targetRect = target.getBoundingClientRect(); |
| 77 | |
| 78 | const maxX = boundsRect.width - targetRect.width; |
| 79 | const maxY = boundsRect.height - targetRect.height; |
| 80 | |
| 81 | const newX = Math.max(0, Math.min(currentX, maxX)); |
| 82 | const newY = Math.max(0, Math.min(currentY, maxY)); |
| 83 | |
| 84 | if (newX !== currentX || newY !== currentY) { |
| 85 | gsap.to(target, { |
| 86 | x: newX, |
| 87 | y: newY, |
| 88 | duration: 0.3, |
| 89 | ease: 'power2.out' |
| 90 | }); |
| 91 | } |
| 92 | } |
| 93 | }; |
| 94 | |
| 95 | window.addEventListener('resize', handleResize); |
| 96 | window.addEventListener('orientationchange', handleResize); |