I am building an online bouquet constructor. I need to insert a Drag and Drop canvas into my web app, so that customers could choose flowers they want to put into their busket and then to reassemble them inside it.
Could you please help me understand how can I do it in bubble? I already downloaded plugins like FabricJS: Drawing & Painting Canvas Plugin | Bubble) and some other drawing plugins, but not quite sure how to use it and whether it is the best way to solve my problem.
You cant really use a “Drawing” plugin for this. It’s not what they’re for. They’re for paint-like images, or canva-like images. It’s not meant for app functionality. You’ll need to create that functionality. There are some resizing & drag & drop plugins already available (I have no clue which ones work as I build my “drag & drop” elements via react then import to bubble if needed.
EDIT: Wait, do you anticipate on users just making a picture of flowers? no functionality?
Thank you very much for your response! I want users to assemble their own flower compositions by dragging flowers they want to have there from a range of flowers presented. They should not draw anything - just pick desired flower and drag it to the place in bouquet they want it to be.
BTW - do you know how to create such Drag and Drop functionality? Or maybe you know some exact plugins which can do it?
Well… I think you’re thinking about it a little too much. I don’t believe you’d need Drag & Drop functionality. Just click a flower and add it to the flower composition. However, the drag & drop can be implemented easily on-top of the original functionality. This would have to be custom-made. I could do something like this for you if that’s something you’re looking for. If that’s the case just shoot me a DM.
You can try using the Draggable elements plugin by Bubble and have the flowers be inside the draggable group (a new element that is available once you install the plugin) and the basket be a droppable area (another plugin element). Try playing around with that and watching some videos on how the plugin works.
Sorry I should have been more specific. We are trying to develop a photo gallery with the capability to select multiple image at once and drag and drop them into a specific order. It sounds like you have found a way to to this and I am wondering if you would be willing to share the code with us.
I’m willing to work privately for you to create the functionality, but I don’t just give my code away (unless it’s a utility plugin type ordeal, then I do it for the community).
