bounds='parent' moves draggable component to get stuck in y axis
まだ誰も着手していません。
評価
- 難易度
- 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時間
- マージ済み PR（30日）
- 5
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-grid-layout/react-draggable のほかの issue
-
bug ready-for-agent
難易度 3/5 1〜2日 初心者へのやさしさ 72/100
react-grid-layout/react-draggable#822 · コメント 2 件 ·
-
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 件 ·
-
error in react 19オープンbug ready-for-agent
難易度 3/5 1〜2日 初心者へのやさしさ 45/100
react-grid-layout/react-draggable#771 · コメント 14 件 · リアクション 31 件 ·
-
enhancement ready-for-agent
難易度 2/5 1〜3時間 初心者へのやさしさ 45/100
react-grid-layout/react-draggable#762 · コメント 1 件 ·
react-grid-layout/react-draggable の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
solana-foundation/solana-com#2202 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 92/100
yegor256/copyrights-action#216 ·
-
[BUG] onScroll never refreshes the window container's height after a vertical-only viewport resizeオープン
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
juliangarnier/anime#1192 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
PedestrianDynamics/pyFDS-Evac#226 ·
メンテナーはふだん 1 日以内に返信