Awesome GitHub RepositoriesDraggable Layout Elements

React Grid Layout is a draggable and resizable grid system for React that organizes components into a coordinate-based layout. It functions as a responsive layout manager and a serialized grid state engine, providing the tools necessary to create user-customizable workspaces where interface elements can be moved and resized. The system distinguishes itself through breakpoint-driven layout mapping, which adjusts grid configurations based on container width. It utilizes a serialized state model to convert spatial positions and dimensions into data formats for saving and restoring user layouts,

Better-scroll is a JavaScript scroll library and touch interaction engine designed to create high-performance scrollable areas in web browsers. It functions as a modular UI component framework that provides the foundation for building complex scrollable elements. The library is distinguished by a plugin-based architecture that allows the injection of custom methods and event hooks. This system enables the creation of specialized interface components such as carousel sliders, scrollable picker inputs, and draggable element systems. The project covers a wide range of mobile web interaction pat

Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures. The library uses a web worker layout engine to offload heavy coordinate calculations to background threads, maintaining interface responsiveness during complex rearrangements. The system provides interactive capabilities for moving items between multiple containers, filtering visibility based

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

react-draggable is a UI interaction library that provides core primitives and components for adding tactile movement and coordinate-based positioning to web elements. It serves as a tool for making user interface elements movable via mouse or touch interactions within React applications. The library supports the implementation of custom drag handles, allowing the initiation of movement to be restricted to specific child elements identified by CSS selectors. It also provides programmatic drag state management, enabling developers to control element positioning or use callbacks for movement wit

gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive interfaces with draggable and resizable elements. It functions as a drag-and-drop layout manager and a JSON-serializable layout engine, allowing user-defined interface states to be persisted and restored. The library distinguishes itself through a touch-enabled grid interface and a responsive system that automatically adjusts item placement based on screen breakpoints. It features a collision-based layout engine that manages overlapping coordinates to shift or swap elements, alongsid

Craft.js is a framework for building extensible drag-and-drop page editors using React components and serializable state management. It provides the core infrastructure to construct custom page builders where users can compose layouts by dragging, dropping, and repositioning elements within a structured editor environment. The framework manages editor state through a component-based node tree, where each user element is represented as an internal node storing its type, props, and parent relationships. This state is managed via React Context and can be serialized to JSON for persistence and sh

Swapy is a drag and drop layout library designed to manage the spatial arrangement of UI components. It functions as an element reordering tracker and visual position manager that exports updated layout sequences as data objects after user interactions. The system monitors changes to the visual order of elements to provide updated layout mappings. It enables the rearrangement of on-screen elements through drag and drop interactions to update visual layout mappings. The library covers dynamic layout management and visual element sorting by converting the visual positions of screen elements in

Gridster.js is a jQuery plugin that turns page elements into a draggable, resizable grid layout. It provides a framework for building interactive dashboards and interfaces where widgets snap to a multi-column grid and can be repositioned by dragging, with automatic layout reflow when items are added, removed, or resized. The plugin handles mouse and touch events through a drag-and-drop manager, calculates widget overlap with a collision detection engine, and positions items using CSS transforms for smoother animations. It maintains an internal registry of all grid items with their coordinates

Davinci est une plateforme de business intelligence et de visualisation de données utilisée pour construire des tableaux de bord et des rapports interactifs. Elle fonctionne comme un constructeur de tableaux de bord basé sur SQL et un service d'analyse multi-tenant qui se connecte aux bases de données via JDBC et des fichiers CSV pour transformer des données brutes en composants visuels. La plateforme se distingue par son modèle de sécurité granulaire, qui inclut des permissions au niveau des lignes et des colonnes intégrées avec l'authentification LDAP et OAuth2. Elle fournit également un outil de visualisation intégré qui permet d'insérer des graphiques et des tableaux de bord sécurisés et paramétrés dans des applications externes via des URL et des cadres (frames). Le système couvre un large éventail de capacités, y compris la modélisation de données avec des modèles SQL, un moteur de mise en page par glisser-déposer pour les tableaux de bord réactifs, et une grande variété de types de visualisation tels que les diagrammes de Sankey, les graphiques radar et les cartes géographiques. Elle inclut en outre l'automatisation pour la planification de rapports par e-mail et utilise la mise en cache clé-valeur pour optimiser les performances des requêtes.