Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Chiusa
  • Qualcosa non va?
#713 5 commenti 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, next.js, react
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
JavaScript
Stelle
9.3k
Fork
1k
Merge medio
2g 16h
PR unite (30g)
5

Preparare l'ambiente

Non abbiamo ancora controllato i file di configurazione di questo progetto. Parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-grid-layout/react-draggable

Tutte le issue di react-grid-layout/react-draggable

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.