MARKETPLACE
PLUGINS
DRAGBLOCKS (PRO)
DragBlocks (Pro) logo

DragBlocks (Pro)

Published March 2026
   β€’    Updated today

Plugin details

Take your Bubble apps to the next level with DragBlocks PRO. Forget clunky drag-and-drop mechanics. DragBlocks PRO uses the industry-standard SortableJS engine, heavily customized and optimized specifically for Bubble's Repeating Groups and Custom States. Build professional Kanban boards, task managers, and reorderable lists in minutes.

πŸš€ Key PRO Features:

πŸ“š True Multi-Drag: Select multiple cards (using Ctrl, Cmd, or Shift) and move them all at once across lists!

πŸ“± Mobile-Ready: Native touch support with customizable delay (prevents accidental drags while scrolling).

πŸ—‘οΈ Deletion Zones (Trash): Turn any element into a "Trash" drop zone to effortlessly delete single or multiple items.

🎨 Premium UI/UX: Customize your selection colors, choose your easing animation (Spring, Smooth, Bouncy), and enjoy ghost placeholders.

πŸ›‘οΈ Click-Shield Technology: Safely click cards to open your Bubble Popups without triggering unwanted selections or drags.

⚑ Optimistic UI Ready: Built-in DOM Revert ensures your Bubble Custom States and database workflows run flawlessly without visual glitches.

Whether you're building the next Trello, Jira, or a complex CRM, DragBlocks PRO gives you the native-app feel your users expect.

Demo Page: https://demo-app-56978.bubbleapps.io/version-test/dragblocks_pro/1773443327164x958546790076215300


Editor: https://bubble.io/page?id=demo-app-56978&test_plugin=1773394025202x582739632535371800_current&tab=Data&name=dragblocks_pro

$15

One time  β€’  Or  $5/mo

stars   β€’   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

NoCoddo logo
NoCoddo
Joined 2025   β€’   67 Plugins
View contributor profile

Instructions

How to Setup DragBlocks PRO in 5 Easy Steps:
Step 1: The Repeating Group

1- Add a Repeating Group to your page.

2- In the RG's HTML ID Attribute, give it a unique name (e.g., rg-todo).
(Note: To enable IDs, go to Settings > General > Expose the option to add an ID attribute to HTML elements).

Step 2: The Cards

1- Inside your Repeating Group, build your card (Group).

2- Give the card an HTML ID Attribute starting with "card-" followed by the Current Cell's Unique ID (e.g., card-Current Cell's Thing's Unique ID).

Step 3: The Plugin Element

1- Drop the DragBlocks PRO element anywhere on your page (it's invisible).

2- Set the Repeating Group ID field to match your RG (e.g., rg-todo).

3- Set a Kanban Group Name (e.g., board1). RGs with the same group name can share cards!

Step 4: Multi-Drag (Optional)

1- Set Enable Multi-Drag to Yes.

2- In Multi-Drag Key, type ctrl, cmd (or shift).

3- Pick your Selection Color.

Step 5: Workflows (Optimistic UI)

1- Go to Workflows and add the event: A DragBlocks PRO Item Moved Cross List.

2- Remove from Old List: Set State (Old List) = Current State's List :minus list: Search for Things (Unique ID is in This DragBlocks' Dragged Item IDs).

3- Add to New List: Set State (New List) = Current State's List :merged with: Search for Things (...).

4- Database: Make changes to a list of Things -> Update their Status!

Types

This plugin can be found under the following types:
Background Services   β€’   Element   β€’   Event

Categories

This plugin can be found under the following categories:
Productivity   β€’   Technical   β€’   Analytics   β€’   Containers   β€’   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble