Canvas Pages and Modules
Search…
Canvas Pages and Modules
2.0.0
Welcome
PAGES
Free Bubble Marketing Page
Premium Bubble Marketing Page
Centered Profile Page
Left-justified Profile Page
Standard Page
Toggle Tabs Page
Menu Page
Mobile Menu Page
Video List Page
Portal/Dashboard Page
Portal / Dashboard Page with Icons
Simple Portal / Dashboard Page with Icons
Search Page
Map Page with Search Bar, Toggle, and Filters
Search Bar Page
Listing Profile Page
Multi-Step Page (Progress Bar)
1-Column Multi-Step Process Page
2-Column Multi-Step Process Page
2-Column Profile Page
2-Column Profile Tabs Page
2-Column Menu Tabs Page
2-Column Checkout Page
2-Column Product Checkout Page
2-Column Video Chat Page
BLOCKS
Comments Thread
Nested Comments Thread (with Like and Reply)
Chat Widget
Bottom Input Chat Widget
Toggle Tabs Group
To-do List
Title Group with Button and Filters
Listing Details with Tags, Button, and Progress Bar
Listing details with icons and menu focus group
Week Daily Availability
Shopping Cart
FAQ Group
Shipping Details
Payment Methods
Order Confirmation
Dismissible Module
Placeholder group
Video Group
About Group
Add to Cart Group
Full Width Map with Directions Link
Location Module (Map and Directions)
Drag and Drop Repeating Group
Advanced Form Inputs Group
Reviews Repeating Group with Image
Reviews (Text Only) Repeating Group
Nested Repeating Group
Standard Repeating Group with Image
Single Input Search Bar and Filter Group
Listing Details Group
Post Group with Upvoting UI
Dashboard Chart Widget
Main Image with Thumbnails
Centered Profile Module
Left-justified Profile Module
1-Column Standard Form Inputs Group
1-Column Instagram Tiles Group with Nested Comments
1-Column Link, Text, and Menu Focus Repeating Group
2-Column Repeating Group (Text, Link, Image, and Description)
2 Column Repeating Group (Link, Text, and Button)
2-Column Tiles Repeating Group
2-Column Simple Form Inputs Group
2-Column Sortable List (Image, Link, Star Rating, and Text) Repeating Group
2-Column Dashboard Widgets
3-Column Dashboard Widgets
3-Column Repeating Group (Text, Link, Image, and Description)
3-Column Text and Link Repeating Group
3-Column Icons with Labels Repeating Group
3-Column Tiles Repeating Group
3-Column Tiles with Buttons Repeating Group
3-Column Horizontal Scroll Repeating Group
4-Column Tiles Repeating Group
5-Column Date Table with Cell Selection, Menu Focus Group, and Filters
Mobile-Friendly Data Table with Cell Selection, Menu Focus Group and Filters
Standard Horizontal Scroll Data Table
Infinite Columns Horizontal Scroll Data Table
Infinite Columns Horizontal Scroll Data Table with Fixed First Column
Popups
Confirmation Popup
Message Popup
Image Popup
Video Popup
Vertical Scroll Popup
Edit Popup
Standard Form Popup
Subscribe Popup
Feedback / Contact Popup
Details Popup
Add List Popup
Advanced Form Popup
Rating Popup
Toggle Tabs Popup
Share Popup
Multi-Step Popup
Invoice Popup
Stripe Credit Card Purchase Popup
Reusables
applyfilters
menufocusgroup or Menu options (︙)
Powered By GitBook
Drag and Drop Repeating Group

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 new_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 Add
  • Open the new_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
BLOCKS - Previous
Location Module (Map and Directions)
Next - BLOCKS
Advanced Form Inputs Group
Last modified 1yr ago
Copy link
Outline
Overview
Structure
How to set up