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

Open
#713 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, next.js, react
Domain
frontend

Research direction

Start with the reported Draggable example using bounds='parent', axis='both', and the handle selector, then inspect how the App, Sidebar, and Component nesting affects the resolved parent. Reproduce the snap and x-axis behavior in the provided Next.js structure. Done means bounds use the intended container rather than the higher-level Sidebar and movement remains possible on both axes.

Written by the indexing model from the issue text.

Description

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.

Dominant language
JavaScript
Stars
9.3k
Forks
1k
Avg merge
3d 8h
Merged PRs (30d)
4

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-grid-layout/react-draggable

All issues in react-grid-layout/react-draggable

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.