Canvas Manual
Search…
Drag and Drop Repeating Group
Use this fully-functional block to create drag-and-drop functionality.

Overview

This fully-responsive and fully-functional block contains a repeating group with draggable groups and droppable zones. Users can easily sort the list by dragging and dropping a group to a different location. Before adding this block to your app, please ensure you have added the Draggable Elements plugin first (Bubble editor > Plugins tab > + Add plugins > Add draggable elements by Bubble).

Structure

  • When this block is added to a page, it is placed within a group called Blocks container 860 (do not rename) on the page. This group contains the responsive settings for all blocks.
  • This block Group DragAndDropRG contains a reusable element inside of it called draggablerg.
    • This reusable element contains all of the logic and drag and drop UI for the block:
      • DroppableGroup_dummy - This is the group that users can drag to a different location
      • Dropzone - This is the group where users can drop the DroppableGroup_dummy (for order numbers after #2)
      • DropArea - This is the group where users can drop the DroppableGroup_dummy (and move the dragged group to #1)
  • All data is displayed in RepeatingGroup dummy (draggable)

How to set up

  • Remove or add workflow to Button New
  • Remove the Group Sort by and Group Button Filter elements if they are not needed
    • If you delete these elements, re-size the Group Collapsible Sort Filter and Button so that it only contains the remaining Button New element. Then, set the group to be fixed-width.
  • Open the draggablerg reusable and update the data source of RepeatingGroup dummy (draggable)
    • In the workflow tab, update the workflows in the custom workflow 'Move thing' and replace any Make changes to Dummy workflows to reference the appropriate data object in your app
  • Update the data source of the display texts
Copy link
On this page
Overview
Structure
How to set up