Interactive Zoom & Pan Use scroll to zoom and drag to move.

Zoom and Drag Element is a high-performance interactive image viewer component built for OutSystems. It allows users to navigate large-scale images—such as architectural floor plans, technical diagrams, or high-resolution maps—within a fixed container.

Key Features:

• Dynamic Zoom: Precision scaling using the mouse wheel or dedicated UI buttons, featuring "Zoom-to-Point" logic where the image scales relative to the cursor position.
• Fluid Panning: Intuitive click-and-drag (mouse) or touch-and-drag (mobile) navigation to explore off-screen details.
• Smart Auto-Fitting: An intelligent centerAndFit algorithm that calculates image aspect ratios against container dimensions to ensure the image starts perfectly centered and visible.
• Hardware Accelerated: Utilizes CSS translate3d and will-change properties to offload rendering to the GPU, ensuring a smooth 60 FPS experience even with large assets.
• Mobile Ready: Full support for touch events and prevents default browser scrolling while interacting with the element.