Drag & Drop Repeating Group

Demo to preview the plugin:

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

  1. Drag-and-Drop Sorting: Users can reorder items in a Repeating Group by dragging and dropping them.
  1. Customizable Handle: Specify a handle element for dragging, allowing for more control over the sortable area.
  1. Animation: Smooth animations during the sorting process, with customizable speed.
  1. Disable/Enable: Option to disable or enable the sorting functionality.
  1. Event Triggering: Triggers a custom event when sorting is complete.
  1. State Publishing: Updates and publishes the new order of items after sorting.

Plugin Element Properties

Drag & Drop

Image without caption
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

  1. 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

  1. 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.
Image without caption
Image without caption
  1. Set a custom state to save the sorted items
Image without caption
  1. Use an event to set the state to the Drag and drop Sorted items
Image without caption

Changelogs

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