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

[cwaj400]

Repro:

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

`

<Draggable handle=".draggable" onDrag={eventControl} onStart={eventControl} bounds='parent' axis='both' onStop={eventControl} // bounds={{left: 0, top: 0, right: 100, bottom: 350}}

`

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 (

);

}`

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 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?