bounds='parent' moves draggable component to get stuck in y axis
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- javascript, next.js, react
- 领域
- frontend
调研方向
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.
由索引模型根据 Issue 内容生成。
描述
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.
- 主要语言
- JavaScript
- 星标
- 9.3k
- 派生
- 1k
- 平均合并
- 2 天 16 小时
- 30 天内合并 PR
- 5
环境准备
我们还没有检查这个项目的环境配置文件。先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
react-grid-layout/react-draggable 的其他 Issue
-
bug ready-for-agent
难度 3/5 1-2 天 新手友好度 72/100
react-grid-layout/react-draggable#822 · 1 条评论 ·
-
bug needs-info
难度 3/5 1-2 天 新手友好度 45/100
react-grid-layout/react-draggable#782 · 2 条评论 ·
-
bug needs-info
难度 4/5 3-5 天 新手友好度 25/100
react-grid-layout/react-draggable#772 · 1 条评论 ·
-
bug ready-for-agent
难度 3/5 1-2 天 新手友好度 45/100
react-grid-layout/react-draggable#771 · 14 条评论 · 31 个 reaction ·
-
enhancement ready-for-agent
难度 2/5 1-3 小时 新手友好度 45/100
react-grid-layout/react-draggable#762 · 1 条评论 ·
查看 react-grid-layout/react-draggable 的全部 Issue
相似的 Issue
-
check:passed logos:add
难度 1/5 1 小时以内 新手友好度 82/100
维护者通常 1 天内回复
-
component/administration domain/framework needs-triage Platform(Default) priority/low
难度 2/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 90/100
semantic-release/gitlab#1032 ·
-
agent/guide documentation hive/hosted-available-lke648397-260827-5n31
难度 1/5 1 小时以内 新手友好度 92/100
维护者通常 1 天内回复
-
agentic-workflows
难度 1/5 1 小时以内 新手友好度 85/100
githubnext/gh-aw-workshop#3933 ·
维护者通常 2 天内回复