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