[Plugin] Better Sortable Lists - Drag & Drop to reorder Repeatings Groups

Showcase Plugins
1

Hi everyone :waving_hand:

I’m excited to launch Better Sortable Lists, a plugin for adding fast and reliable drag-and-drop sorting to Repeating Groups.

It supports large lists with lazy loading, nested Repeating Groups, transfers between lists, drag handles and offers two saving strategies. I’ve tested it with more than 1,000 items without encountering performance issues.

:backhand_index_pointing_right: Plugin Page / :globe_with_meridians: Demo / :gear: Editor

Main features

  • Reorder items within a Repeating Group
  • Transfer items between connected Repeating Groups
  • Works with nested and lazy-loaded Repeating Groups
  • Save a complete ordered list or only the moved item’s numeric rank
  • Use the complete cell or a dedicated drag handle
  • Keep movement inside the window, the RG, or a custom element
  • Lock dragging to the X or Y axis
  • Customize animations and drag feedback

Better Sortable Lists support lazy loading repeating groups

Quick setup

  1. Add one Better Sortable Lists controller for each Repeating Group.
  2. Set the RG’s data source, then set the controller’s Items to that RG’s list.
  3. Connect them using the generated ID or the same manual ID.
  4. Choose a saving mode and create an Order changed workflow.

The plugin updates the list in the browser but does not persist changes automatically. Save the new order through a Bubble workflow when Order changed runs.

Save the ordered list

This mode requires a database field of type list to store the complete order.

Use that list as the source for both the controller and the Repeating Group. When Order changed runs, save Ordered items into the list field.

For a draft experience, use the same custom state as the source for both elements, update it to Ordered items after each drop, then save it back to the database when the user confirms.

Save a numeric rank

Use this mode with a numeric Rank field. The controller and Repeating Group must use the same list sorted by Rank in ascending order.

When Order changed runs, update the Moved item and set its Rank field to Calculated rank.

The rank is calculated from the new neighboring items:

  • Between two items, the plugin uses the midpoint
  • At either end, it adds or subtracts the configured Rank gap
  • In an empty list, it uses the Rank gap as the first value

For example, an item moved between ranks 1,000 and 2,000 receives rank 1,500.

Transfers between lists

To connect multiple lists, enable transfers on each controller, use the same Board key and Type of content, and set each controller’s Items to its Repeating Group’s list. Each list can use its own saving mode and be configured to send items, receive items, or both.

Transfers don’t require a dedicated workflow or an additional event. Simply reuse the controller’s existing Order changed event, just as you would for a single sortable list.

In Rank mode, handle both updates in that event: save Calculated rank to the moved Thing’s Rank field, and update the field that determines which list it belongs to.

BetterSortableListKanban

Cell state after reordering

Bubble may rebuild Repeating Group cells after a reorder. As a result, unsaved input values, custom states, or plugin state stored inside a cell may not follow the moved item. Use autobinding, save values on the Thing, or store drafts outside the cell and associate them with their Thing.

To my knowledge, no other Bubble plugin currently combines all of these capabilities.

Enjoy building! :raising_hands:

1 Like