Awesome GitHub RepositoriesDraggable and Resizable React Components

react-draggable is a drag and drop library and coordinate-based position manager for React. It functions as a component wrapper that adds draggable behavior to user interface elements, enabling them to be moved via mouse or touch interactions. The library provides touch-enabled interaction tools that unify pointer events across desktop browsers and touch screen devices. It utilizes CSS transforms to handle element movement and coordinate tracking. The system covers movement constraints such as axis restriction and boundary clamping to confine elements within specific areas. It includes posit

This is a low-code visual drag-and-drop editor project for building web page layouts. It provides a canvas-based environment where users can assemble pages by placing, resizing, and rotating pre-built UI components through direct mouse interaction. The editor includes a grid-based alignment system that snaps components to invisible grid lines or other component edges for precise positioning. Components can be grouped into single units or locked in place to prevent accidental movement, and animations or custom actions can be bound to user interactions like clicks or hovers. An undo-redo comman

Ce projet est un système de composants et d'utilitaires pour gérer les mises en page en vue fractionnée dans les applications React. Il fournit un système de panneaux redimensionnables qui organise le contenu en zones horizontales et verticales avec des bordures déplaçables. Le système inclut un outil de mise en page UI pliable pour basculer la visibilité des panneaux afin de maximiser l'espace d'écran disponible. Il prend en charge l'imbrication récursive de panneaux, permettant aux mises en page d'être structurées comme des arbres où les panneaux contiennent d'autres groupes de panneaux redimensionnables. La bibliothèque couvre la construction de mise en page via l'utilisation de contraintes de dimension de panneau, permettant la définition de tailles minimales et maximales. Elle gère le partitionnement dynamique de la fenêtre d'affichage et fournit des mécanismes pour construire des grilles ajustables et des zones de contenu.

Ce projet est une bibliothèque d'interaction UI React et un gestionnaire de géométrie de composants. Il fournit un ensemble d'outils pour créer des éléments au sein d'une application React que les utilisateurs peuvent déplacer et redimensionner. La bibliothèque permet la personnalisation des poignées d'interaction, permettant l'application de composants, styles ou classes CSS personnalisés aux poignées de redimensionnement pour correspondre à des designs visuels spécifiques. Le système couvre la manipulation d'éléments à la fois par interaction utilisateur directe et par mises à jour de géométrie programmatiques. Il inclut des capacités pour le snapping sur grille, les contraintes de bordure et les ratios d'aspect verrouillés pour contrôler la position et la taille des composants UI.

react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable and resizable within a browser window. It functions as a constraint-based layout component that wraps DOM elements to enforce boundaries, grid snapping, and aspect ratio locks during manual adjustments. The library allows for the definition of custom interaction handles to act as the primary triggers for dragging and resizing actions. It supports axis restrictions, boundary limits, and the ability to round position and dimension values to specified pixel increments. The system