Make the whole page the bound

[J4v4Scr1pt]

Hi!

I have just started to with this lib and with react-spring this seems really powerfull!

What I aim to do is a component that floats on the page and the user should be able to move it to any position inside the page body.
I can see that the bounds is set to ininifty by default but I would like it to be the whole page and it needs to be dynamicly set depending on how big the screen is. Because if it is set to infinity you can move it outside and this creates scrollbars and breaks the page.

And with this question I also wonder if its possible to stop highlighting text elements when moving the component around?

Regards T

[dbismut]

Hey @Sorkstryparen this looks like something doable indeed ;) Can you share a sandbox with your first attempt ? I'll iterate on it afterwards and comment my code.

[J4v4Scr1pt]

Hi again 😁!

After some testing I solved it with doing this:

const bounds = document.getElementById("root").getBoundingClientRect();
bounds: { left: 0, right: bounds.right - 70, top: 0, bottom: bounds.bottom - 100 },

But for some reason it dont work in sandbox.io. The component gets stuck until I do a change in DraggableButton.jsx.. 🤔
But I have updated it to what I have right now.

Don't know if it's a good solution though 😊

[dbismut]

I've stumbled upon the same issue, seems related to react 18, I need to update, will try this week-end.
In the meantime, here is what I would do:

https://codesandbox.io/s/draggableelement-forked-8m4tvq

Sandbox is downgraded to React 17. I think it's pretty self explanatory but let me know if you need help.
You can pass a dom node to bounds so from your previous message you could have:

bounds: document.getElementById("root")

David

[J4v4Scr1pt]

Ahh smooth solution, like it 😀.
Like you said its self explanatory, thx for the help mate.

Keep up the awesome work!

Regards T

[dbismut]

@Sorkstryparen for reference, the problem with React 18 comes from React Spring. There's a beta on v9 that works with React 18 under the beta flag (9.4.5-beta.0).

[J4v4Scr1pt]

Ahh thx @dbismut great to know!! 👍

[J4v4Scr1pt]

I just wanted to add this if anyone else comes here, this is my final solution to make the whole page the bound:

		{
			drag: {
				from: () => [wrapperX.get(), wrapperY.get()],
				bounds: () => {
					const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
					const vh = Math.max(
						document.getElementById("root").getBoundingClientRect().height || 0,
						document.documentElement.clientHeight || 0,
						window.innerHeight || 0
					);
					return { left: 0, right: vw - 100, top: 0, bottom: vh };
				},
				rubberband: true,
				filterTaps: true,
			},
		}