Bubble does not have native drag-and-drop, but plugins like Draggable Elements or Air DnD let you build reorderable lists, Kanban boards, and sortable interfaces. This tutorial covers installing a drag-and-drop plugin, configuring sortable lists, saving the new order to the database, and building a Kanban-style board.
Overview: Building a Drag-and-Drop Interface in Bubble
Drag-and-drop interfaces are essential for task managers, project boards, and any app where users need to reorder items. Bubble requires a plugin for this functionality. This tutorial walks you through setting up sortable lists and multi-column Kanban boards using popular drag-and-drop plugins.
Prerequisites
- A Bubble app with a Data Type that has an order field (number)
- Basic familiarity with Bubble plugins and Repeating Groups
- A drag-and-drop plugin installed (e.g., Draggable Elements or Air DnD)
Step-by-step guide
Install a drag-and-drop plugin
Install a drag-and-drop plugin
Go to the Plugins tab and click Add plugins. Search for Draggable Elements, Air DnD, or a similar plugin. Popular options include the Draggable Elements plugin by Bubble or the Air DnD plugin by Air. Install it. Review the plugin documentation for its specific element types and workflow actions. Most provide a special container element and a draggable item element.
Expected result: The drag-and-drop plugin is installed and its elements appear in the element palette.
Add an order field to your Data Type
Add an order field to your Data Type
Go to the Data tab and add a field called order (type: number) to the Data Type you want to make sortable (e.g., Task, Card, Item). Set default values incrementally when creating new records. Sort your Repeating Group by this order field ascending. This number determines the display sequence.
Expected result: Your Data Type has an order field that controls the display sequence.
Set up the sortable list
Set up the sortable list
On your page, add the plugin's sortable container element. Inside it, configure it to display items from your Data Type, sorted by the order field. The plugin typically provides a way to bind each item to a database record. Configure the drag handle (the part of the item users grab to drag) and the drop zones. Follow the specific plugin's documentation for element configuration.
Pro tip: Most drag-and-drop plugins require you to use their specific container element instead of a standard Repeating Group.
Expected result: Items display in a sortable list where users can drag to reorder.
Save the new order to the database
Save the new order to the database
When users finish dragging, the plugin fires an event (like When reorder ends or When item dropped). In this event's workflow, the plugin provides the new order of items. Loop through the reordered list and update each record's order field to match its new position. Some plugins provide a bulk update action; others require you to process items individually using Schedule API Workflow on a List.
Expected result: The new order is saved to the database and persists across page reloads.
Build a Kanban board with drag between columns
Build a Kanban board with drag between columns
For a Kanban board, create multiple sortable containers side by side — one for each status column (e.g., To Do, In Progress, Done). When an item is dragged from one column to another, the plugin fires a column-change event. In the workflow, update both the status field (to match the new column) and the order field (for position within the new column). Display each column with its own data source filtered by status.
Expected result: A Kanban-style board where users can drag items between status columns and reorder within columns.
Complete working example
1DRAG AND DROP SETUP2====================34DATA TYPE: Task5 - title (text)6 - description (text)7 - status (Option Set: To Do, In Progress, Done)8 - order (number)9 - assigned_to (User)1011SORTABLE LIST:12 Plugin container element:13 - Data source: Search Tasks (status = To Do), sorted by order14 - Each item displays: title, assigned_to15 - Drag handle: grip icon on left side1617 On reorder event:18 → For each item in new order:19 Make Changes to Task → order = new position index20 (Use Schedule API Workflow on a List if plugin21 does not provide batch update)2223KANBAN BOARD:24 Three columns side by side:25 Column 1: Tasks where status = To Do, sorted by order26 Column 2: Tasks where status = In Progress, sorted by order27 Column 3: Tasks where status = Done, sorted by order2829 On item dropped in new column:30 → Make Changes to Task:31 status = new column's status32 order = new position in column3334INITIAL ORDER ASSIGNMENT:35 When creating a new Task:36 → order = Search Tasks (same status):count + 137 (Puts new items at the end)Common mistakes when building a drag and drop interface in Bubble.io: Step-by-Step Guide
Why it's a problem: Using a standard Repeating Group instead of the plugin's container
How to avoid: Replace the Repeating Group with the plugin's sortable container element and follow its configuration guide
Why it's a problem: Not saving the new order to the database after dragging
How to avoid: Handle the plugin's reorder event and update each item's order field in the database
Why it's a problem: Setting all new items to order = 0
How to avoid: Set the order to the current count + 1 when creating new items, placing them at the end of the list
Best practices
- Always persist drag-and-drop order changes to the database immediately
- Use an order field (number type) on your Data Type for explicit sequence control
- Assign incremental order values when creating new items
- Test drag-and-drop on mobile devices since touch behavior may differ from desktop
- Keep sortable lists under 50 items for smooth performance
- Use the plugin's batch update features when available to minimize WU consumption
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a Kanban board in Bubble.io where users can drag tasks between To Do, In Progress, and Done columns. Which plugin should I use, and how do I save the new order and status when items are moved?
Build a drag-and-drop task board for my app. I need three columns (To Do, In Progress, Done) where users can drag tasks between columns and reorder within columns. Save changes to the database.
Frequently asked questions
Which drag-and-drop plugin is best for Bubble?
Draggable Elements and Air DnD are the most popular. Air DnD has better Kanban support. Draggable Elements is simpler for basic sortable lists. Check reviews and compatibility with your Bubble version.
Does drag-and-drop work on mobile?
Most plugins support touch-based dragging, but the experience is less smooth than desktop. Test thoroughly on mobile devices.
Can I limit who can drag items?
Yes. Use conditional visibility to hide drag handles for read-only users, or disable the draggable property based on the current user's role.
Will reordering many items use a lot of WUs?
Yes. Each item's order update is a database write (about 0.5 WU). Reordering 20 items costs about 10 WUs. For frequent reordering, consider batching updates.
Can I drag items between pages?
No. Drag-and-drop works within a single page. For cross-page moves, use a button-based workflow to change the item's status or category instead.
Is this suitable for a production project management tool?
For basic Kanban boards, yes. For complex project management with dependencies, timelines, and resource allocation, you may need additional custom logic. RapidDev can help build enterprise project management tools in Bubble.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation