Forum Documentation Showcase Pricing Learn more

Enabling users to add elements to the page by drawing boxes

#1

In need for a way to let users create new element by drawing a box on the page with their cursors.

Think about the time when you click & hold on your Bubble editor and drag the cursor; it’ll draw a box (outline) and that’s how you add new elements to the page, right? Now, I want this functionality for my visitors, but this time, anytime they draw a box, it’ll be a new element on the page (preferably input boxes).

Here’s another example, it works by click-move-click instead of click-hold-move-release: [http://jsfiddle.net/d9BPz/546/](http://example on jsfiddle)

I couldn’t find any option to read cursor location, or letting users create a fixed size box and resizing it by dragging the corners (window behavior on Win or Mac operation systems). Any hack or direction is appreciated!

#2

Have you looked at Bubble plugins for this? …I’ve seen one that enables the point and click component of this.

If there isn’t a plugin that does all of this, then you may need some custom JS to fill the gaps. Just my initial reaction, in case it’s helpful.

1 Like
#3

Which plugin was that? Can you give me the link Scott? @sridharan.s

I believe I’ll need to jump in to the custom JS world with Bubble. I believe It’ll also unlock some mental blockers I got for .b – having the option to use traditional code where .b is coming short.

Thanks for the help!

#4

I’ve seen numerous that do portions of this. For example, I believe there’s one called MoveIt that makes it easy to position an element (e.g., an input) at any starting spot and make it any size. So, if there’s a way to “record” the click locations, then MoveIt may work well for the 2nd half of the requirement.

The devil may be in the details with this though.