bounds='parent' moves draggable component to get stuck in y axis
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
- 2d 16h
- Merged PRs (30d)
- 5
Getting set up
We have not checked this project's setup files yet. Start from its README, and see our first-contribution guide for the general steps.
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-grid-layout/react-draggable
-
bug ready-for-agent
Difficulty 3/5 1-2 days Newbie friendliness 72/100
react-grid-layout/react-draggable#822 · 1 comment ·
-
bug needs-info
Difficulty 3/5 1-2 days Newbie friendliness 45/100
react-grid-layout/react-draggable#782 · 2 comments ·
-
bug needs-info
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-grid-layout/react-draggable#772 · 1 comment ·
-
error in react 19Openbug ready-for-agent
Difficulty 3/5 1-2 days Newbie friendliness 45/100
react-grid-layout/react-draggable#771 · 14 comments · 31 reactions ·
-
enhancement ready-for-agent
Difficulty 2/5 1-3 hours Newbie friendliness 45/100
react-grid-layout/react-draggable#762 · 1 comment ·
All issues in react-grid-layout/react-draggable
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
Maintainers usually reply within 1 day
-
curriculum documentation quality
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
githubnext/gh-aw-workshop#3897 ·
Maintainers usually reply within 2 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 1 day
-
agent/quality hive/hosted-available-lke648397-260827-5n31 quality testing
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
Maintainers usually reply within 1 day