awesome-repositories.com
Blog
MCP
awesome-repositories.com

Descubre los mejores repositorios open-source con nuestra búsqueda potenciada por IA.

ExplorarBúsquedas curadasAlternativas open-sourceSoftware autohospedableBlogMapa del sitio
ProyectoAcerca deCómo clasificamosPrensaServidor MCP
Aviso legalPrivacidadTérminos
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
clauderic avatar

clauderic/dnd-kit

0
View on GitHub↗

Dnd Kit

This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It provides a foundational framework for managing complex spatial interactions, state synchronization, and element registration, allowing developers to create interactive web applications that support mouse, touch, and keyboard inputs.

The library distinguishes itself through a highly extensible architecture that separates input handling from interaction logic. It utilizes a sensor-based input abstraction to normalize diverse user interactions and a plugin-driven lifecycle to inject custom behaviors, movement constraints, or visual transformations. By employing a centralized registry and collision-detection strategy, it enables precise control over how elements interact with defined drop zones, including support for grid snapping and axis-based movement restrictions.

Beyond core movement, the library includes comprehensive tools for managing the user experience during interactions. This includes automated screen reader announcements and accessibility attribute management to ensure interfaces remain inclusive. It also handles visual feedback through portal-based rendering, automatic container scrolling, and animated list reordering, providing a responsive interface that updates dynamically as users manipulate elements.

Búsqueda con IA

Explora más repositorios increíbles

Describe lo que necesitas en lenguaje sencillo: la IA clasifica miles de proyectos open-source curados por relevancia.

Start searching with AI
dndkit.com
↗

Features

  • Drag and Drop Libraries - Provides a modular toolkit for building accessible, component-based drag-and-drop interfaces in React.
  • List Reordering Components - Enables intuitive reordering of list items through drag-and-drop interactions within single or multiple containers.
  • Accessibility Management - Provides automated screen reader announcements and accessibility attribute management to ensure drag-and-drop interfaces remain inclusive.
  • Accessible Interaction Patterns - Provides utilities for creating inclusive drag-and-drop experiences that handle screen reader announcements and keyboard navigation.
  • Accessible UI Components - Ensures inclusive interface elements through automated screen reader announcements and accessibility attribute management.
  • Drag and Drop Interactions - Coordinates drag-and-drop state and communication between components using a central provider.
  • Drag Boundary Constraints - Provides configurable constraints to restrict the movement of draggable elements within specific containers or coordinate boundaries.
  • Input Normalization Utilities - Normalizes mouse, touch, and keyboard events into a unified stream of interaction commands.
  • Interaction Customizers - Tailors drag behavior with specialized sensors, movement constraints, and collision detection to meet unique design requirements.
  • Component-Based UI Libraries - Offers a collection of reusable primitives for managing complex state and spatial interactions in web interfaces.
  • Interaction Lifecycle Managers - Manages the lifecycle of drag-and-drop operations by configuring sensors, plugins, and modifiers.
  • Drag Handles - Limits the initiation of drag operations to specific sub-elements to prevent accidental triggers.
  • Snapping Behaviors - Enables precise element positioning by restricting movement to predefined grid patterns or alignment points.
  • Drag-and-Drop Event Callbacks - Executes custom logic and interface updates during specific phases of drag-and-drop interactions via event callbacks.
  • Multi-Input Interaction Handlers - Detects and normalizes interactions from mouse, touch, pen, and keyboard inputs for drag-and-drop operations.
  • State Management Providers - Coordinates drag lifecycle events and synchronizes data between draggable items and drop targets using hierarchical context providers.
  • Custom Drag Behaviors - Allows developers to inject custom logic or visual effects into the drag-and-drop lifecycle by attaching modular plugins.
  • Event-Driven Plugin Hooks - Allows developers to inject custom logic into specific phases of the drag-and-drop interaction process via event-driven hooks.
  • Scroll Thresholds - Automatically scrolls containers when dragged items approach edges to keep them visible during movement.
  • Drag Operation Controls - Governs the visual representation of elements during drag operations, including cloning and hiding behaviors.
  • Drag and Drop Configurations - Adjusts drag-and-drop movement, constraints, and transformations using a modular architecture to tailor the user experience.
  • Interaction Modifiers - Intercepts and adjusts coordinate data to enforce movement constraints, snapping, and custom transformation logic.
  • Input Handling - Implements custom sensor logic to support unique input devices and specialized interaction patterns.
  • Interactive Element Registries - Maintains a registry of draggable and droppable elements to enable coordinate detection and collision resolution.
  • Layout Animation Engines - Applies smooth visual transitions to elements when their order changes to provide clear feedback during layout updates.
  • Optimistic Updates - Updates the visual order of elements immediately during drag operations to ensure a responsive and fast-feeling interface.
  • Collision Detection - Calculates spatial intersections between moving elements and target zones to determine valid drop states.
  • Drag Debugging Overlays - Renders debug overlays for drag shapes, drop zones, and collision boundaries to assist in troubleshooting complex interface interactions.
  • Activation Handlers - Enables users to initiate drag-and-drop interactions on specific interface elements by attaching movement behavior to them.
  • Draggable Element Definitions - Enables interface components to be moved by assigning unique identifiers and references to the elements that users can interact with.
  • Draggable Element Registries - Registers specific elements as draggable items and attaches optional handles or toggleable states to initiate interactions.
  • Drop Target Registries - Restricts which drop zones can accept specific draggable items by matching their assigned types during the interaction process.
  • Compatibility Restrictions - Limits which draggable items can be placed into a specific target by validating item types against defined acceptance criteria.
  • Interaction Feedback Effects - Coordinates visual state changes and layering animations to provide responsive feedback during drag interactions.
  • Interaction Tracking - Maintains a centralized store of interactive components to enable efficient spatial lookups during drag operations.
17,243 estrellas·884 forks·TypeScript·MIT·7 vistas

Historial de estrellas

Gráfico del historial de estrellas de clauderic/dnd-kitGráfico del historial de estrellas de clauderic/dnd-kit

Alternativas open-source a Dnd Kit

Proyectos open-source similares, clasificados según cuántas características comparten con Dnd Kit.
  • bevacqua/dragulaAvatar de bevacqua

    bevacqua/dragula

    22,160Ver en GitHub↗

    Dragula is a JavaScript drag and drop library and DOM element manipulator used to move and reorder HTML elements between multiple containers. It functions as a UI interaction framework and event manager that tracks drag lifecycles to facilitate the movement of elements within a web browser interface. The library distinguishes itself through configurable constraint validation, allowing developers to define which elements are draggable and which containers are permitted drop targets. It supports specialized interaction patterns such as element cloning, the use of specific drag handles to restri

    JavaScriptcomponentdrag-and-dropdrag-drop
    Ver en GitHub↗22,160
  • juliangarnier/animeAvatar de juliangarnier

    juliangarnier/anime

    69,932Ver en GitHub↗

    This project is a declarative motion framework and JavaScript animation engine designed to transition CSS properties, SVG attributes, and DOM elements. It provides a comprehensive set of tools for creating complex, multi-part motion sequences by synchronizing animations, timers, and callbacks into a single, unified timeline. The library distinguishes itself through a robust timeline-based sequence orchestrator that allows for precise timing, label-based control, and hierarchical nesting of animations. It also features a physics-driven interaction library that enables draggable elements with c

    JavaScriptanimationanimecanvas
    Ver en GitHub↗69,932
  • sortablejs/sortableAvatar de SortableJS

    SortableJS/Sortable

    31,135Ver en GitHub↗

    Sortable is a framework-agnostic JavaScript library for creating reorderable lists through drag and drop interactions. It functions as a reorderable list manager that allows users to rearrange DOM elements using pointer interactions on modern browsers and touch devices. The library enables the transfer or cloning of items between different lists using shared group identifiers. It supports complex organizational structures, including nested reorderable lists for managing hierarchical data across different levels. Its capabilities cover the animation of element movements and the configuration

    JavaScriptdragdrag-and-dropdrag-drop
    Ver en GitHub↗31,135
  • greensock/gsapAvatar de greensock

    greensock/GSAP

    23,877Ver en GitHub↗

    GSAP is a comprehensive JavaScript animation library designed for orchestrating complex motion sequences and interactive user interfaces. It provides a robust property-interpolation engine that calculates intermediate values for CSS styles, attributes, and numeric properties, enabling smooth visual transitions across web elements. The framework is built on a core architecture that manages animation lifecycles, timeline-based sequence orchestration, and virtual property interception to ensure precise control over motion. The library distinguishes itself through a modular, plugin-based extensib

    JavaScriptanimationgsapjavascript
    Ver en GitHub↗23,877
Ver las 30 alternativas a Dnd Kit→

Preguntas frecuentes

¿Qué hace clauderic/dnd-kit?

This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It provides a foundational framework for managing complex spatial interactions, state synchronization, and element registration, allowing developers to create interactive web applications that support mouse, touch, and keyboard inputs.

¿Cuáles son las características principales de clauderic/dnd-kit?

Las características principales de clauderic/dnd-kit son: Drag and Drop Libraries, List Reordering Components, Accessibility Management, Accessible Interaction Patterns, Accessible UI Components, Drag and Drop Interactions, Drag Boundary Constraints, Input Normalization Utilities.

¿Qué alternativas de código abierto existen para clauderic/dnd-kit?

Las alternativas de código abierto para clauderic/dnd-kit incluyen: bevacqua/dragula — Dragula is a JavaScript drag and drop library and DOM element manipulator used to move and reorder HTML elements… juliangarnier/anime — This project is a declarative motion framework and JavaScript animation engine designed to transition CSS properties,… sortablejs/sortable — Sortable is a framework-agnostic JavaScript library for creating reorderable lists through drag and drop interactions.… greensock/gsap — GSAP is a comprehensive JavaScript animation library designed for orchestrating complex motion sequences and… marceljuenemann/angular-drag-and-drop-lists — This library provides a set of directives for building sortable, hierarchical user interfaces within the Angular… gridstack/gridstack.js — gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive…