Hi Clare,
Here’s some feedback from my experience with Bubble - hope it helps!
I think you should be able to achieve most of what you are hoping to build with Bubble without needing to buy plugins, although I’m not completely certain about all your requirements. Depending on how much you will need backend workflows or API connections it should be possible to get pretty far on your MVP with the free plan.
A): Drag as an event trigger (separate and in addition to click.)
This should be possible. There is a Bubble-made plugin called Draggable Elements you can add to your project. These will give you draggable groups that have a condition on them called ‘When X is dragged’. You can use this to drive conditional things, or add a workflow to trigger whenever this is true. The Draggable Elements plugin is pretty straightforward to use and there is a good amount of community content and documentation on it.
B): Hold down, as an event trigger (separate and in addition to click)
Maybe others will have a trick to do this, but I’m not sure how too. You can use conditionals from ‘Is pressed’ to change formatting and how things look, but it doesn’t look like they can be used to trigger workflows.
C): Hovering as an event trigger (separate and in addition to click)
Unlike B, ‘Is hovered’ can be used to trigger both workflows and conditionals.
D): An Action that would move a static image around the page in a way that would simulate an animation (For example, move a transparent background image of a duck in front of an image of water.)
There are some out-of-the-box animations you could use for this that should be easy to implement. To do this you’d set up a workflow with some trigger and then add an action to animate an element. Some of the animations will make things appear or hide at the end.
E): Can the user of the web app select an image from among a group, drag and drop it onto a page, save that page, and it will be in the same place the next time they log in?
Selecting an image from a group should be straightforward. You could use a type of thing or option set connected to a repeating group for this. To make it draggable you can put the image element inside a draggable group
If you add places where they could drop the pictures this will work. For example, you could use a repeating group or static drop-zones ready to receive the image then perform a workflow to save them. This should be pretty straightforward again using the Draggable Elements plugin.
However, placing the elements in an exact spot and storing their coordinates would be much more difficult or maybe not possible without custom code. I had wanted this functionality for one of my projects and never figured it out. I don’t think the draggable elements plugin lets you access the pixel coordinates of an element. This would be tricky for other reasons to do with responsiveness and user screen sizes. (Maybe others know a trick here?).
F): Can they drag and drop an image and in doing so, displace other images? For example, if there is a row that contains a circle, square, and triangle, could they drop a rectangle between the circle and the square, and displace the square and triangle to the right? Then, if they deleted the rectangle later, could the square and triangle move back to the left?
There are ways to do his using a repeating group’s indexes and updating your list with their indexes. It can be a bit tricky but it is achievable. There’s some videos out there that will show you how to do it. You can set this up using the Draggable Elements plugin or I think there may be more specific plugins for this as well.
Best of luck with your app!
