react-draggable

React-Draggable é uma biblioteca de componentes React para tornar elementos arrastáveis. Faz parte da organização react-grid-layout e é publicada no npm como react-draggable. A biblioteca fornece dois componentes. `<Draggable>` envolve um elemento existente e o estende com manipuladores de eventos de arrastar e estilos, movendo itens via CSS Transforms para que possam ser arrastados independentemente do posicionamento atual. Ele não cria um elemento wrapper no DOM. `<DraggableCore>` é uma opção de nível inferior para usuários que precisam de controle total: fornece callbacks de arrastar sem gerenciar estado ou estilos e não define transforms, deixando o posicionamento para o desenvolvedor. O README aponta React-Resizable e React-Grid-Layout como exemplos de uso do DraggableCore. As principais props de `<Draggable>` incluem axis (both, x, y, none), bounds (parent, seletor CSS ou objeto left/top/right/bottom), seletores CSS cancel e handle, grid snapping, position para uso controlado, positionOffset, scale para pais transformados, disabled e callbacks onStart, onDrag, onStop e onMouseDown. O DraggableData passado aos handlers contém node, x, y, deltaX, deltaY, lastX e lastY. Retornar false de onStart cancela o arrasto. Definir className, style ou transform em `<Draggable>` é um erro; esses pertencem ao elemento filho. O README documenta a compatibilidade: a versão 4.x suporta React 16.3+, a 3.x suporta React 15–16 e a 2.x suporta React 0.14–15. Os tipos TypeScript estão incluídos. A instalação é via npm ou yarn, com exemplos de importação ES module e CommonJS. Uma seção notável aborda nodeRef: passar uma prop nodeRef evita avisos de depreciação do ReactDOM.findDOMNode() no React Strict Mode, e o README mostra como encaminhar tanto ref quanto props para componentes personalizados. Outra seção explica o uso controlado versus não controlado, mostrando como passar uma prop position para reposicionamento programático enquanto ainda usa o gerenciamento de estado do Draggable. A seção de Content Security Policy explica que o react-draggable injeta um pequeno elemento style no head do documento no primeiro arrasto (o comportamento enableUserSelectHack, ativado por padrão) para evitar a seleção de texto durante o arrasto. Sob uma CSP estrita sem 'unsafe-inline' em style-src, isso é bloqueado. Três soluções são documentadas: passar uma prop nonce, contar com o fallback global __webpack_nonce__ do webpack, ou definir enableUserSelectHack={false} e adicionar as duas regras de seleção à sua própria folha de estilos. O nonce é lido apenas quando o elemento é criado pela primeira vez, e o mesmo elemento é compartilhado por todos os Draggable/DraggableCore na página. O repositório inclui um site de demonstração, um changelog, workflow de CI e instruções de contribuição cobrindo yarn dev, yarn test e uma checklist de release usando make targets. O projeto é licenciado sob MIT.