bounds='parent' moves draggable component to get stuck in y axis

[cwaj400]

Repro:

Using Next.Js - importing : import Draggable, {DraggableCore} from 'react-draggable';

<div className='border bg-gray-100 h-96'> <Draggable handle=".draggable" onDrag={eventControl} onStart={eventControl} bounds='parent' axis='both' onStop={eventControl} // bounds={{left: 0, top: 0, right: 100, bottom: 350}} > <div className="draggable" id='item'> <BsArrowReturnLeft size={30}></BsArrowReturnLeft> </div> </Draggable> </div>

When I console log the parent node: console.log(document.getElementById('item').parentNode); I get this component with classname <div className='border bg-gray-100 h-96'> which is correct. However, the draggable arrow snaps to the right side of the screen (not the parent), and won't move along the x axis. It should not snap past the parent, and it should move along both axis.

---

UPDATE

The issue here is that the Draggable component is being snapped to the parent - which would be the Sidebar, as this is the strict 'parent' wrapping all children in my react application: export default function App({Component, pageProps}) { return ( <div> <Sidebar> <Component {...pageProps} /> </Sidebar> </div> ); }

So the question is - how do I bound the draggable component to a specific HTMLElement, i.e. the immediate parent, the container, rather than the top level parent? I am assuming this is the issue here.

[izcoser]

Having this exact same issue. Tried binding to parent via bounds="parent" and bounds=".container" (class immediately above the <Draggable> component) but no luck. My item gets snapped to the left of the screen moving only up and down.

[safaldas-neoito]

you can set the position to absolute for the dragging item It fixed for me

[Ha0ran2001]

When I set bounds prop, I can only move the element to right and bottom, I can't move it back to top or left. Why?

[a-hyssopus]

Have the same issue. Binding bounds to a wide "parent" doesn't allow to move the element on x axis. Can't use "position: absolute" on the immediate Draggable's child for the fix because of design requirements.

Reproduction: https://codesandbox.io/p/sandbox/table-absolute-position-2h7gjg

[pedro-brinfer-antunes]

When I set bounds="#root", it seems to work as expected