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

Partially out-of-view window jumps and changes position when handle is touched

Chiusa
  • Qualcosa non va?
#742 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
30/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Start by creating a minimal reproduction of a partially out-of-view window using the draggable component inside a scrolling parent. Compare the window position and parent scroll state before and after touching the title handle, using the reported onDragStop workaround as a reference. Done means the window does not jump, unexpectedly scroll into view, or change position relative to its peers.

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

Descrizione

Hi, I'm making a windowing system (for which, thanks for your utility).

But there's something odd. When I click on the title (which is the handle) of the pictured window, then it jumps fully into view (by scrolling the parent), and also changes its top/left co-ordinates (moving it away from its peers).

I've had to compensate by adding the following code to the onStop method (note the reversal of the deltaY values, and the counter-scroll operation):

const onDragStop = (e, data) => {

        if (data.deltaY) {
            panelFrameElementRef.current.scrollTop -= data.deltaY
        }

        setWindowConfigSpecs((oldState) => {
            return {...oldState, top:data.y - data.deltaY, left: data.x}
        })

}

Any suggestions?

Screenshot 2024-03-16 at 8 19 15 AM
Lingua principale
JavaScript
Stelle
9.3k
Fork
1k
Merge medio
2h 35m
PR unite (30g)
4

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: 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.