awesome-repositories.com
المدونة
awesome-repositories.com

اكتشف أفضل مستودعات المصادر المفتوحة باستخدام بحث مدعوم بالذكاء الاصطناعي.

استكشفعمليات بحث منسقةبدائل مفتوحة المصدربرمجيات ذاتية الاستضافةالمدونةخريطة الموقع
المشروعحولكيفية ترتيب النتائجالصحافةخادم MCP
قانونيالخصوصيةالشروط
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
clauderic avatar

clauderic/dnd-kit

0
View on GitHub↗
17,243 نجوم·884 تفرعات·TypeScript·MIT·6 مشاهداتdndkit.com↗

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.

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.

سجل النجوم

مخطط تاريخ النجوم لـ clauderic/dnd-kitمخطط تاريخ النجوم لـ clauderic/dnd-kit

بحث بالذكاء الاصطناعي

استكشف المزيد من المستودعات الرائعة

صف ما تحتاجه بلغة بسيطة — وسيقوم الذكاء الاصطناعي بترتيب آلاف المشاريع مفتوحة المصدر المنسقة حسب الصلة.

Start searching with AI

بدائل مفتوحة المصدر لـ Dnd Kit

مشاريع مفتوحة المصدر مشابهة، مرتبة حسب عدد الميزات المشتركة مع Dnd Kit.
  • bevacqua/dragulaالصورة الرمزية لـ bevacqua

    bevacqua/dragula

    22,160عرض على 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
    عرض على GitHub↗22,160
  • juliangarnier/animeالصورة الرمزية لـ juliangarnier

    juliangarnier/anime

    69,932عرض على 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
    عرض على GitHub↗69,932
  • sortablejs/sortableالصورة الرمزية لـ SortableJS

    SortableJS/Sortable

    31,135عرض على 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
    عرض على GitHub↗31,135
  • greensock/gsapالصورة الرمزية لـ greensock

    greensock/GSAP

    23,877عرض على 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
    عرض على GitHub↗23,877
عرض جميع البدائل الـ 30 لـ Dnd Kit→

الأسئلة الشائعة

ما هي وظيفة 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.

ما هي الميزات الرئيسية لـ clauderic/dnd-kit؟

الميزات الرئيسية لـ clauderic/dnd-kit هي: 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.

ما هي البدائل مفتوحة المصدر لـ clauderic/dnd-kit؟

تشمل البدائل مفتوحة المصدر لـ clauderic/dnd-kit: 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…