This is an update we’re very excited to share, as it opens a lot of possibilities in terms of what you can do with Bubble! You can now add draggable elements, that users can drag around, and make them droppable, in which case this can trigger a workflow. This lets you do a lot: if you think about Tinder in a Bubble way, a workflow is triggered when a draggable picture is dropped on one of 2 drop areas, like and dislike.
To use this, you have to add the Plugin ‘Draggable Elements’ to your app. This brings 2 elements:
a draggable group, that behaves like a group data-wise, and that can be dragged around. You can either make it droppable, in which case it will trigger a workflow when dragged on a drop area.
a drop area that receives a draggable group, and that triggers a workflow.
We also have an action that lets you move a draggable element programmatically, which can be useful to highlight some parts of the interface, etc.
Here are some examples of how it works (please do not modify these pages)
Thanks for this feature. Solves an immediate problem in a project I’m redeveloping in Bubble right now. I had drag & drop in the previous/non-Bubble version.
If I wanted to save the position of draggable elements, I’d need to create some kind of position ranking system that saves to the DB triggered by drop areas right? Right now, if the page refreshes, the dragged elements (no drop area involved) will revert to their original placement because no save-able workflow for position was actually recorded, correct?
I’ve been thinking about this, too. I’d love to have an easy way of building something like Trello, where we could rank/organize things in a list that keeps its arrangement every time I drop an element. This is a really, really great start that opens up a lot functionality, but I definitely look forward to what else might come down the pipe.
We’re not at the trello level of functionality, though you could probably do a lot having a field ‘rank’ and when a droppable group is dropped on a cell you use the cell’s index as the new rank. You can experiment there.
@romanmg what is the use case? Wouldn’t a rank field do what you want?
Yes a rank field should work. Was just confirming that that’s what I should do to save positions.
Use case for client is a virtual shelf that contains images (like a bookshelf with images of books) and they want their users to be able to place their books in whatever order they want on the shelf. Up to now, I’ve been using a repeating group and was about to implement a ranking system to “move” positions and it should achieve the same thing, but the drag and drop makes the interface MUCH friendlier for this kind of thing - will still need a ranking system to save those positions though.
That is awesome. Actually it took me a long time to understand why things were not being dropped until I saw this Droppable elements example.
I want to add drag and drop with move or copy option. How can I get the Keyboard input? For example, on the Workflow when the group is dropped, on “and when” is there a way to say that this second condition is if the key Ctrl was pressed?
