Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Fechada
  • Algo errado?
#713 5 comentários 2 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript, next.js, react
Domínio
frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
JavaScript
Estrelas
9.3k
Forks
1k
Merge médio
2d 16h
PRs com merge (30d)
5

Preparar o ambiente

Ainda não verificamos os arquivos de configuração deste projeto. Comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react-grid-layout/react-draggable

Todas as issues de react-grid-layout/react-draggable

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.