Draggable floating group

[bernardovargasrodela]

Hello everyone, I am building a desktop application using draggable groups but I had one small UX issue: When the user scrolls down, the draggable group doesn’t act like a floating group so it stays behind and the user needs to keep pulling it down while scrolling.

I thought about simply replacing the draggable group for a Floating one, but then I might cover some important parts of the screen like buttons or necessary information. (The group will show a video, like a floating wizard experience, so it’s big and would definitely sover important buttons.)

Can anyone help me by giving me some guidance on how to build one of these alternatives:
1 - Draggable group that keeps up while scrolling
2 - Floating group which can be dragged horizontally (In case it covers a button, the user would be able to drag it)

Thank you!

[Oliver-wholegraintech]

What about a floating group which you make transparent and takes up the top 50% of the screen and have the draggable group within that floating group?

With the floating group parameters you should be able to make sure its not in the way?

[bernardovargasrodela]

I thought it might work but once I tried it, the floating group doesn’t allow the users to click the buttons behind it. And if I place the floating group in the back, the element stops being draggable. So at the end, it didn’t work.

[adamhholmes]

You can just use a draggable group, but apply some CSS to it to give it a ‘fixed’ position, so it stays in place when the page scrolls.

#draggableGroup {
  position: fixed !important;
}

Here’s an example: Floating Window (bubbleapps.io)

The window on the left has a relative position, whereas the one on the right has a fixed position.