Overview

Ghost Drag & Drop is a high-performance, reactive UI framework for OutSystems designed to transform static interfaces into fluid, modern experiences. It eliminates the clunky feel of traditional drag-and-drop by using an Adaptive Target System: drop zones remain discreetly tucked away when idle and expand dynamically only when a drag operation is detected.

The system relies on a Global State Architecture, allowing the entire application UI to react synchronized to the user's physical movement of elements.

Core Components

1. The Source (Parent Block)

The "brain" of the operation. It monitors specific elements, creates a floating "Ghost" clone that follows the cursor, and captures metadata from the DOM.

• Intelligent Extraction: Automatically converts HTML5 data-item-* attributes into a clean JSON payload.
• State Management: Injects a global .ghost-is-dragging class into the document body to trigger UI transformations across all targets simultaneously.

2. The Target (Child Block)

An "elastic" drop zone that optimizes screen real estate.

• Idle State: Minimized to a small icon or badge to save space.
• Active State: Expands to fill its parent container the moment a drag starts, providing a clear "landing strip" for the user.
• Visual Haptics: Provides immediate feedback through success animations and color flashes upon a successful drop.