This plugin provides an easy and customizable drag-and-drop experience with various settings to tailor the behavior according to your needs. By adjusting the configuration fields, you can control the dragging experience, colors, and shared elements across repeating groups.
Key Features

Drag and Drop Modes:

• Swap: Allows elements to be swapped within the same repeating group.
  
• Sorting: Allows elements to be reordered within the repeating group.
  

Element Sharing:

• Define a common group name for plugin elements. Plugin elements with the same group name can share elements across different repeating groups.
  
• Option to clone the element when sharing or keep it as a reference.
  

Sorting and Swap Controls:

• Disable sorting between common groups while keeping the drag-and-drop functionality for sharing elements only.
  

Element Restrictions:

• A configurable list of IDs for elements that should not be draggable.
  
• Custom colors: Apply custom colors for non-draggable elements.
  

Multi-Select:

• Enable the option for multi-select, allowing users to select and drag multiple elements at once.
  
• Multi-Select with CTRL key: Hold the Ctrl key to multi-select elements.
  
• Custom background colors for multi-selected elements.
  

Ghost Element Customization:

• Provide a custom color for the ghost element being dragged.
  

Customizable Animation Time:

• Control the animation time for dragging and dropping elements.
  

Bound Groups:

• Bind common groups to prevent new items from being added to a specific group.
  

Multi-Device Support:

• Fully functional on desktops, tablets, and mobile devices.
  
• Touch-Friendly Interface: Optimized for touch interactions on mobile devices.
  
• Real-Time Feedback: Highlighting drop zones and providing animations during drag-and-drop operations.
  

Instruction


Configuration

• Drag and Drop Mode:   Choose between Swap and Sorting mode:
  • Swap: Allows elements to swap places when dragged.  
    
  • Sorting: Allows elements to be reordered.
    
  
  
• Common Group:   Set a Common Group Name for plugin elements to enable sharing between different repeating groups.
  
• Cloning Shared Elements:   Set the Clone toggle to choose whether shared elements should be cloned or moved to another group.
  
• Disable Sorting for Common Groups:   If you want to disable sorting but allow element sharing between common groups, toggle Disable Sorting for the common groups.
  
• Element Restrictions:   Use the Non-Draggable IDs field to enter IDs of elements that should not be draggable.
  
• Custom Colors:   Set custom colors for non-draggable elements, multi-selected elements, and the ghost element.
  
• Multi-Select Configuration:   Enable the Multi Select option to allow selecting multiple elements.   Optionally, enable Keyboard Navigation to multi-select using the CTRL key.
  
• Animation Time:   Adjust the Animation Time (in milliseconds) for the drag-and-drop process.
  
• Allow New Item:   Disable the Allow New Item feature to restrict new items from being added to common groups, allowing only existing items to be rearranged.
  

FAQ's

1. How do I install the Drag & Drop to Reorder RG plugin?  

• Go to the Plugins section of your Bubble app.  
  
• Search for "Drag & Drop to Reorder RG" and click Install.  
  
• Drag the "Drag And Drop Repeating Group" element onto your page from the element menu.
  

2. What is the difference between Swap and Sorting modes?  

• Swap: Allows elements to swap places when dragged within the same repeating group.  
  
• Sorting: Allows elements to be reordered (moved up or down) within the same repeating group.
  

3. Can I share elements across different repeating groups?  
Yes! You can define a common group name for plugin elements. Elements with the same group name can share across different repeating groups. You also have the option to clone the element or keep it as a reference.

4. Can I prevent some elements from being draggable?  
Yes. You can use the "Non-Draggable IDs" field to enter the IDs of the elements that should not be draggable.

5. How can I customize the colors of different elements in the drag-and-drop interface?  
You can customize colors for non-draggable elements, multi-selected elements, and the ghost element (the element being dragged) through the plugin's configuration settings.

6. What does the Multi-Select feature do?  
The Multi-Select feature allows users to select and drag multiple elements at once. You can also enable keyboard navigation with the Ctrl key to multi-select elements.

7. Is the plugin optimized for mobile devices?  
Yes! The plugin is optimized for mobile devices, including a touch-friendly interface for easy interactions on tablets and smartphones.

8. Can I control the speed of the drag-and-drop animation?  
Yes, you can adjust the animation time (in milliseconds) for the drag-and-drop process to suit your preferences.

9. How do I bind common groups to prevent new items from being added?  
You can use the "Allow New Item" toggle to disable the addition of new items to specific groups. This ensures that only existing items can be rearranged.

10. Does the plugin support real-time feedback during the drag-and-drop process?  
Yes! The plugin provides real-time feedback by highlighting drop zones and showing animations during the drag-and-drop operations.

11. Is the plugin compatible with all devices?  
Yes, it works fully on desktops, tablets, and mobile devices, ensuring a smooth drag-and-drop experience across different screen sizes.

12. Can I clone elements when sharing between groups?  
Yes, you can choose whether shared elements should be cloned or moved to other groups using the "Cloning Shared Elements" toggle in the configuration.

13. How do I link the plugin to a specific repeating group?  
Ensure the Repeating Group has a unique ID (use the Element ID in the plugin configuration), then set the plugin element to control the repeating group by providing this ID.