Moveable popup/group window?

Hi Bubblers, I am wondering if there is a way to create a popup like window which the user would be able to drag and reposition on their screen?

The use case is for search filters on my app. I have some core filters for searching which are visible on the page but also have a range of other filters I want to offer to the user. I find that if all the filters are visible on the page together at once, it becomes too much and overcrowded.

So I am wondering if there is a solution to have the user click a “more filters” text to open a popup/group and show them the remaining filter options they can use for their search (let’s think of it like advanced filters).

For the user experience, I feel this would work best if 1) the user can reposition the popup/group where they would like on their screen 2) the main page beneath the popup group remains fully visible and clickable 3) the user doesn’t have to keep re-opening the popup window each time they want to change filters. They can run and view their search all while the popup/group remains displayed, to enable easy access for them to edit filters they may need too.

Any thoughts are most welcome! Thank you.

I found two webpages which are related to the draggable element, not sure will it help but you can take a look on them.

w3schools draggable element
Another sample code from codepen.io

Samson @ Plugin Developer
Plugin Page
Plugin Forum

1 Like

Hey @mattwatts29 ,

I think the “Draggable Elements” plugin by Bubble might help you.
Just install it and then you can create a draggable group.

Awesome, thanks @Sart. I will have a play with it!

1 Like

Thanks @samsonlcl. I’ll take a look!

2 Likes