Transform your repeating groups with Draggable RG Pro
The most advanced and intuitive drag-and-drop reordering plugin for Bubble. Create seamless user experiences with smooth animations and professional touch interactions. Simply assign a Group ID to any repeating group, and instantly enable powerful drag-and-drop functionality with comprehensive customization options.


🔗 DEMO LINKS:

Live Demo
https://emotix-plugins.bubbleapps.io/version-test/draggable_rg_pro

Editor View
https://bubble.io/page?id=emotix-plugins&tab=Design&name=draggable_rg_pro&type=page


🚀 WHAT MAKES IT SPECIAL:

    - Zero coding required - works with any existing repeating group
    - Real-time drag-and-drop with physics-based animations
    - Complete visual customization (ghost styling, colors, opacity)
    - Professional mobile-optimized touch interactions
    -Multiple state tracking (visual order, drag status, position indices)
    - Event triggers for advanced workflow automation
    - Width preservation technology prevents layout issues
    - Supports multiple draggable groups on the same page
    - Advanced ghost styling with border and background options


💡 PERFECT FOR:

    - Task management and to-do lists
    - Content management systems
    - Priority ranking interfaces
    - Portfolio and gallery reordering
    - Shopping cart item arrangement
    - Kanban-style project boards
    - Any list that needs user-controlled ordering


⚙️ HOW TO USE DRAGGABLE RG PRO:

📝 1. SETUP:
    • Add "Draggable RG Pro" element to your page
    • Create a repeating group with your content
    • Make sure the repeating group is visible on page load before the plugin initializes
    • Set a unique Group ID for your repeating group (e.g., "task-list")
    • In Draggable RG Pro element, enter the Group ID: "task-list"

🎨 2. CUSTOMIZATION:
    • Ghost Styling: Enable borders, set colors and opacity
    • Border Radius: Control ghost element corner roundness
    • Ghost Background: Choose colors with transparency control
    • Mobile Optimization: Touch-friendly interactions built-in

⚡ 3. WORKFLOW INTEGRATION:
    • Use "order_changed" event to save new arrangements to database
    • Access "visual_order" state for complete reordering data
    • Monitor "is_dragging" state for conditional UI changes
    • Track "from_index" and "to_index" for single-item movements
    • Trigger "drag_started" event for custom drag initiation logic

🔧 4. ADVANCED FEATURES:
    • Multiple state outputs for flexible workflow design
    • Automatic width preservation prevents visual glitches
    • Smart mobile detection for optimal touch experience
    • Professional ghost styling matches your app's design
    • Event-driven architecture for complex automation

💡 TIPS:
    - Test on both desktop and mobile devices for optimal experience
     - Use visual_order state to update your database order fields
    - Combine with Simple Looper plugin for efficient batch updates
    - Set ghost opacity to 0.3-0.5 for best visual feedback
    - Enable ghost borders to match your app's design language



=== PLEASE READ THIS!!! ====
The drag functionality doesn't work when your repeating group contains buttons, inputs, dropdowns, or similar interactive elements. This happens because both clicking a button and starting a drag use the same action (mouse click or touch), which creates a conflict. To prevent accidentally triggering buttons when you want to drag or accidentally starting a drag when you want to click a button, these elements are excluded from dragging.

The best solution is to replace your Button element with a Text element instead. You can make the text clickable by adding a workflow with 'When Text is clicked' and style it to look like a button using background colors, borders, and conditional formatting for hover effects. Text elements work perfectly with both dragging and clicking functionality. Alternatively, you can use a Group element and make it clickable, which also maintains compatibility with the drag feature.