Dnd

هذه مكتبة React للسحب والإفلات مصممة لبناء قوائم قابلة للسحب وعناصر قابلة لإعادة الترتيب يمكن الوصول إليها. توفر إطار عمل تفاعل متعدد المدخلات يدير الأحداث عبر الماوس، واللمس، ومدخلات المستشعرات المخصصة لإنشاء واجهات مستخدم تفاعلية.

تتضمن المكتبة مديراً للقوائم الافتراضية للحفاظ على معدلات إطارات عالية عند التعامل مع مجموعات البيانات الكبيرة من خلال معالجة العناصر المرئية حالياً على الشاشة فقط. كما تدعم تكامل مستشعرات الإدخال المخصصة، مما يسمح بتسجيل أنواع إدخال متخصصة لتشغيل عمليات السحب والتحكم فيها.

يغطي النظام مجموعة واسعة من قدرات التفاعل، بما في ذلك التمرير التلقائي للحاوية، واكتشاف التصادم القائم على الإحداثيات، وإعادة تعيين العناصر باستخدام البوابات (portals). يتم دمج إمكانية الوصول من خلال دعم لوحة المفاتيح وإعلانات قارئ الشاشة التي تنقل حركة العناصر وتغييرات الموضع.

Features

Reorderable Lists - Provides a framework for building interactive vertical or horizontal lists in React where items can be reordered.
List Reordering Interfaces - Implements accessible vertical and horizontal lists where items can be manually reordered via mouse, touch, or keyboard.
Accessible UI Components - Provides drag-and-drop interfaces with built-in keyboard support and ARIA-compliant screen reader announcements.
Collision Detection - Calculates intersections of dragged element bounds with target drop zones to determine reordering positions.
Drag and Drop Libraries - Provides a comprehensive library for implementing accessible drag-and-drop interactions in React applications.
Interaction Constraint Logic - Includes logic to restrict which elements are draggable and define conditional boundaries for interactions.
Unified Input Abstraction Layers - Abstracts mouse, touch, and keyboard events into a unified internal trigger system for consistent drag operations.
Touch and Drag Interactions - Manages drag and drop interactions across mouse, touch, and custom sensor inputs through a unified framework.
Interaction Customizers - Supports tailoring drag behavior through the integration of specialized sensors and custom drag handles.
Custom Input Sensors - The library enables registering custom input types or scripted experiences to trigger and control drag operations.
Virtualisation Engines - Ships a virtualization engine that optimizes performance by recycling DOM elements for visible content during drag operations.
Virtualized List Rendering - Efficiently renders only the visible portion of large lists to maintain high frame rates.
UI Change Announcements - Provides real-time announcements of UI updates and state changes to screen readers for dynamic drag-and-drop content.
High-Performance Rendering - Optimizes the rendering of large datasets in React to maintain high frame rates during drag interactions.
Screen Reader Live Regions - Implements screen reader live regions to dynamically communicate item movement and position changes.
Virtualized List Rendering - Minimizes DOM nodes by rendering only the items currently visible in the viewport during active drag interactions.
Portal-Based Injection - Moves dragged items to a separate DOM layer using portals to avoid layout clipping and z-index conflicts.

سجل النجوم

hello-pangeadnd

Name: hello-pangea/dnd
Author: hello-pangea

View on GitHub

3,973 نجوم131 تفرعاتTypeScript4 مشاهداتdnd.hellopangea.com

Dnd

Features

Reorderable Lists - Provides a framework for building interactive vertical or horizontal lists in React where items can be reordered.
List Reordering Interfaces - Implements accessible vertical and horizontal lists where items can be manually reordered via mouse, touch, or keyboard.
Accessible UI Components - Provides drag-and-drop interfaces with built-in keyboard support and ARIA-compliant screen reader announcements.
Collision Detection - Calculates intersections of dragged element bounds with target drop zones to determine reordering positions.
Drag and Drop Libraries - Provides a comprehensive library for implementing accessible drag-and-drop interactions in React applications.
Interaction Constraint Logic - Includes logic to restrict which elements are draggable and define conditional boundaries for interactions.
Unified Input Abstraction Layers - Abstracts mouse, touch, and keyboard events into a unified internal trigger system for consistent drag operations.
Touch and Drag Interactions - Manages drag and drop interactions across mouse, touch, and custom sensor inputs through a unified framework.
Interaction Customizers - Supports tailoring drag behavior through the integration of specialized sensors and custom drag handles.
Custom Input Sensors - The library enables registering custom input types or scripted experiences to trigger and control drag operations.
Virtualisation Engines - Ships a virtualization engine that optimizes performance by recycling DOM elements for visible content during drag operations.
Virtualized List Rendering - Efficiently renders only the visible portion of large lists to maintain high frame rates.
UI Change Announcements - Provides real-time announcements of UI updates and state changes to screen readers for dynamic drag-and-drop content.
High-Performance Rendering - Optimizes the rendering of large datasets in React to maintain high frame rates during drag interactions.
Screen Reader Live Regions - Implements screen reader live regions to dynamically communicate item movement and position changes.
Virtualized List Rendering - Minimizes DOM nodes by rendering only the items currently visible in the viewport during active drag interactions.
Portal-Based Injection - Moves dragged items to a separate DOM layer using portals to avoid layout clipping and z-index conflicts.

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

مشاريع مفتوحة المصدر مشابهة، مرتبة حسب عدد الميزات المشتركة مع Dnd.

clauderic/dnd-kit
clauderic/dnd-kit
17,243عرض على GitHub
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 c
TypeScriptdragdrag-and-dropdraggable
عرض على GitHub17,243
bevacqua/dragula
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
عرض على GitHub22,160
desandro/draggabilly
desandro/draggabilly
3,871عرض على GitHub
Draggabilly is a JavaScript drag and drop library used to make DOM elements draggable on desktop and mobile. It serves as a coordinate-based UI tool and interaction library for tracking and setting the horizontal and vertical positions of interface elements during user interaction. The library provides a mobile-ready touch handler that converts mouse and touch movements into element translation. It includes specialized capabilities for restricting movement to specific axes or container boundaries and implements grid snapping to align elements to a predefined pixel grid. The tool manages the
JavaScript
عرض على GitHub3,871
ganlanyuan/tiny-slider
ganlanyuan/tiny-slider
5,333عرض على GitHub
Tiny-slider is a vanilla JavaScript carousel library used to create touch-enabled content sliders and accessible UI components without external dependencies. It functions as a responsive layout engine that adjusts slide visibility and dimensions based on viewport breakpoints. The library distinguishes itself through built-in lazy loading for images and media to improve page performance and a responsive system that automatically scales item counts and spacing according to the device screen size. It also supports nested slider instances, allowing for the creation of multi-directional scrolling
HTMLcarouselslider
عرض على GitHub5,333

عرض جميع البدائل الـ 30 لـ Dnd

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

ما هي وظيفة hello-pangea/dnd؟

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

الميزات الرئيسية لـ hello-pangea/dnd هي: Reorderable Lists, List Reordering Interfaces, Accessible UI Components, Collision Detection, Drag and Drop Libraries, Interaction Constraint Logic, Unified Input Abstraction Layers, Touch and Drag Interactions.

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

تشمل البدائل مفتوحة المصدر لـ hello-pangea/dnd: clauderic/dnd-kit — This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It… bevacqua/dragula — Dragula is a JavaScript drag and drop library and DOM element manipulator used to move and reorder HTML elements… desandro/draggabilly — Draggabilly is a JavaScript drag and drop library used to make DOM elements draggable on desktop and mobile. It serves… ganlanyuan/tiny-slider — Tiny-slider is a vanilla JavaScript carousel library used to create touch-enabled content sliders and accessible UI… mikke89/rmlui — RmlUi is a cross-platform UI renderer and middleware library that enables the creation of user interfaces using a… reach/reach-ui — Reach UI is an open-source library of accessible, low-level React components designed to serve as a foundation for…