Drag, Drop & Resize by %
Drag, Drop & Resize by %
Documentation
Documentation
search
rocket_launchGetting Started
expand_moreIntroduction
Key Capabilities
Installation
First Test
settingsConfiguration
chevron_rightElement Setup
Plugin Element Configuration
Restrict Area ID
Initial Margin X
Initial Margin Y
Width
Height
Draggable Element
boltStates & Events
chevron_rightExposed States
Margin X %
Margin Y %
Custom Events
constructionImplementation Patterns
chevron_rightPersistent Positioning
Repeating Group Integration
Dashboard Builder
Kanban Board
Conditional Dragging
verifiedBest Practices
chevron_rightID Attribute Management
Position Data Management
Container Selection
Performance Optimization
Mobile Considerations
Debugging
categoryUse Cases
chevron_rightCustom Dashboard
Kanban Task Board
Interactive Floor Plan Designer
Photo Collage Builder
Game Board Interface
Customizable UI Builder
buildTroubleshooting
chevron_rightElement Doesn't Move
Element Escapes Boundaries
Positions Don't Save
Positions Don't Restore
Dragging is Jumpy
Works in Editor But Not Preview
Percentage Positioning Seems Wrong
schoolAdvanced Topics
chevron_rightDynamic Restriction Areas
Multiple Instances
Combining with Other Plugins
Custom Styling
Security Considerations
Accessibility
Performance at Scale
Getting Started
Introduction
Nebula - Drag, Drop & Resize by % is a plugin that transforms any Bubble element into a draggable component with percentage-based positioning. Unlike traditional drag-and-drop solutions that use fixed pixel coordinates, this plugin calculates all positions as percentages relative to a boundary container, ensuring responsive behavior across all screen sizes and devices.
The plugin provides complete control over initial positioning, dynamic sizing, boundary constraints, and exposes real-time position data through states and events. This makes it ideal for building customizable dashboards, kanban boards, interactive builders, and any interface where users need to freely position elements.