Demo to preview the plugin:
Live Demo: https://drag-drop-rgrp.bubbleapps.io
Introduction
This plugin enhances Bubble's Repeating Group functionality by adding sortable capabilities. It allows users to reorder items within a Repeating Group using drag-and-drop interactions.
Features
- Drag-and-Drop Sorting: Users can reorder items in a Repeating Group by dragging and dropping them.
- Customizable Handle: Specify a handle element for dragging, allowing for more control over the sortable area.
- Animation: Smooth animations during the sorting process, with customizable speed.
- Disable/Enable: Option to disable or enable the sorting functionality.
- Event Triggering: Triggers a custom event when sorting is complete.
- State Publishing: Updates and publishes the new order of items after sorting.
Plugin Element Properties
Drag & Drop
Fields:
Title | Description | Type |
🍊 Content | ||
Repeating Group ID | The ID of the repeating group that you want to enhance. | Text |
Data Type | The same data type that is set on the repeating group. | App Type |
Handle | Optionally use this option to make only a part of the element draggable. Provide the HTML ID of the element that should be the draggable handle. | Text (optional) |
Disabled | Disables the drag & drop functionality if checked. | Checkbox (yes/no) |
🍭 Styling | ||
Animation Speed | Speed of the animation that runs while sorting. Set to 0 to disable the animation. | Number |
Element Actions
- Refresh Repeating Group - can be triggered to reorder the elements in the Repeating Group based on their current positions
Exposed states
Title | Description | Type |
Sorted Items | The updated list of items, in their new sort order. | Text(list) |
Element Events
Title | Description |
sorted | Fires whenever the dragging has ended. |
Workflow example
- Add the Drag & Drop element to the page and fill in the necessary settings. Make sure to fill in the correct ID of the RG you want to sort in the HTML ID field.
- Set a custom state to save the sorted items
- Use an event to set the state to the Drag and drop Sorted items
Changelogs
Update 05.10.24 - Version 1.9.0
- Refresh action error handling added
Update 23.09.24 - Version 1.8.0
- Removed "#" From the Repeating group ID field
Update 25.07.24 - Version 1.7.0
- The "HTML ID" field made dynamic
Update 20.07.24 - Version 1.6.0
- Minor update
Update 18.07.24 - Version 1.5.0
- New action - Refresh Repeating Group
Update 13.06.24 - Version 1.4.0
- Updated demo/service links
Update 22.02.24 - Version 1.3.0
- updated description
Update 08.02.24 - Version 1.2.0
- minor updates
Update 03.02.24 - Version 1.1.0
- updated description
Update 13.11.23 - Version 1.0.2
- update v4
Update 01.01.23 - Version 1.0.1
- added the ability to use a drag handle and a way to enable/disable the entire element
Update 29.12.22 - Version 1.0.0
- initial release