For a framework for building interactive user interfaces, the strongest matches are clauderic/dnd-kit (dnd-kit is a modular toolkit for building accessible drag-and-drop), taye/interact.js (interact) and hammerjs/hammer.js (Hammer). react-dnd/react-dnd and clauderic/react-sortable-hoc round out the shortlist. Each is ranked by relevance to your query, popularity and recent activity.
Entdecke die besten Frameworks für Interaction Design in deinem Projekt. Vergleiche Top-Open-Source-Bibliotheken nach Aktivität und Features, um die beste Lösung zu finden.
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
dnd-kit is a modular toolkit for building accessible drag-and-drop interfaces in React, providing sensor-based input abstraction for mouse, touch, and keyboard—exactly the kind of high-level interaction library you want for drag-and-drop, though it is React-specific and doesn’t cover broader gestures like resizing or multi-touch.
interact.js is a JavaScript interaction library used to implement drag and drop, resizing, and multi-touch gestures within web browsers. It provides a specialized interaction framework for scalable vector graphics, allowing these elements to be moved and resized. The library features a multi-touch gesture engine that recognizes complex patterns such as pinch and rotate, and a coordinate snapping engine for aligning elements to grids or restricting movement within boundaries. It also includes a cross-frame state synchronizer to share interaction states and input events across multiple browser
interact.js is a JavaScript library that provides high-level abstractions for drag-and-drop, resizing, and multi-touch gestures with a unified event system and gesture recognition, making it a comprehensive match for an interaction abstraction library.
Hammer.js is a library for recognizing touch gestures in web applications. It functions as a unified interface that translates raw pointer, mouse, and touch inputs into a consistent stream of interaction data, allowing developers to detect patterns such as taps, swipes, and pans across different browsers and hardware. The library distinguishes itself through a modular architecture that uses configurable logic blocks to evaluate input streams against specific mathematical thresholds. It maintains an internal registry of active touch points to track complex multi-finger movements like pinching
Hammer.js provides a unified API for handling touch, mouse, and pointer events with built-in gesture recognition for taps, swipes, pans, and multi-touch, covering most of your interaction abstraction needs; drag-and-drop can be built on its pan gestures, though explicit accessibility support is not a focus.
React DnD is a library for building complex drag-and-drop interfaces within React applications. It provides a declarative, component-based architecture that abstracts native browser drag-and-drop APIs, allowing developers to manage state and interactions between draggable sources and drop targets. The library utilizes a dependency injection backend to decouple interaction logic from specific input methods, supporting mouse, touch, and native browser events through a unified normalization layer. It employs a registry pattern to track active drop zones and a monitor pattern to observe the lifec
react-dnd is a drag-and-drop interaction library for React that provides a declarative API and unified event handling for mouse and touch, but it is specialized to drag-and-drop and does not cover resizing, multi-touch gestures, or framework-agnostic use, so it partially aligns with the broader interaction abstraction library sought.
React Sortable Hoc is a library for building drag-and-drop reorderable lists and grids within web applications. It provides a set of reusable components designed to integrate into the component-based architecture of React, allowing users to rearrange elements through mouse or touch input. The library utilizes a higher-order component pattern to inject drag-and-drop state management into existing list components without requiring modifications to the underlying implementation. It employs portal-based ghost rendering to move elements outside the normal document flow, while using hardware-accele
React Sortable Hoc is a higher-order component library that abstracts drag-and-drop reordering for lists and grids, which fits the request for an interaction abstraction library—but it is React-specific and focuses solely on sortable drag-and-drop, not supporting other gestures, resizing, or multi-touch.
use-gesture is a JavaScript gesture manager and interaction tool designed to detect and process user input patterns. It functions as a React gesture hook library and a general utility for tracking screen coordinates and movement patterns to drive interactive component behaviors. The library specializes in capturing complex mouse and touch interactions, including dragging, pinching, swiping, and scrolling. It provides a system for implementing drag and drop functionality and pinch-to-zoom interactions. The tool covers the development of interactive UI components by normalizing diverse input e
use-gesture is a dedicated gesture management library that provides high-level React hooks for handling drag, pinch, swipe, and scroll interactions with a unified API, directly matching the search for an interaction abstraction library with drag-and-drop and multi-touch support.
Sortable is a JavaScript drag and drop library used to create reorderable lists of HTML elements. It is a framework-agnostic tool and a touch-enabled interaction library that functions across modern browsers and touch devices without dependencies on specific web frameworks. The library enables the movement and cloning of elements between different containers using shared group configurations. It supports the repositioning of multiple items simultaneously and the use of specific drag handles to restrict which areas of an element trigger a move. Additional capabilities include programmatic sor
Sortable is a framework-agnostic drag-and-drop library for reorderable lists, fitting the interaction library intent, though it focuses on drag-and-drop rather than providing a broader gesture-recognition or pointer-event abstraction.
Draggable is a JavaScript library for implementing draggable elements and sortable lists within a web browser. It provides a functional toolset for creating accessible drag and drop interfaces and a mechanism for dynamically swapping, sorting, and reordering HTML elements in real time. The library features a cross-input interaction layer that unifies mouse, touch, and force-touch events into a single stream for consistent behavior across different devices. It specifically includes tools for providing screen reader feedback and assistive technology support to ensure drag operations are accessi
Draggable is a JavaScript library that unifies mouse, touch, and force-touch into one stream for building accessible drag-and-drop and sortable interfaces, fitting your need for an interaction abstraction library—though it focuses on drag-and-drop rather than general gesture recognition or resizing.
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 React component wrapper that provides high-level abstractions for drag-and-drop with unified mouse and touch support, directly matching your search for an interaction abstraction library, though it focuses on dragging rather than covering all gesture types.
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
Dragula is a focused drag-and-drop library that provides high-level abstractions for moving elements between containers, making it a good fit if you specifically need drag-and-drop interaction handling, but it does not cover other gestures like multi-touch or resizing, and lacks a unified pointer event API and accessibility support.
Kivy is a cross-platform Python GUI framework used to build graphical user interfaces that run on desktop and mobile operating systems from a single codebase. It functions as a multi-touch UI library and a custom widget toolkit, providing a development environment for packaging Python applications into binary installations for Android and iOS. The framework is distinguished by its ability to handle complex multi-touch gestures and interactive input across various devices. It utilizes a specialized domain language for declarative UI construction to separate visual layout definitions from Pytho
Kivy is a cross-platform Python GUI framework built around multi-touch gesture recognition and unified input handling, offering a custom event system and built-in drag-and-drop behaviors that directly match the high-level interaction abstractions you are looking for.
Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
Moveable is a TypeScript library that makes DOM elements draggable, resizable, scalable, rotatable, and pinchable through high-level gesture abstractions, directly matching the need for an interaction library, though it does not highlight accessibility support.
| Repository | Stars | Sprache | Lizenz | Letzter Push |
|---|---|---|---|---|
| clauderic/dnd-kit | 17.2K | TypeScript | MIT | |
| taye/interact.js | 12.9K | TypeScript | MIT | |
| hammerjs/hammer.js | 24.4K | JavaScript | MIT | |
| react-dnd/react-dnd | 21.6K | TypeScript | MIT | |
| clauderic/react-sortable-hoc | 10.9K | JavaScript | mit | |
| pmndrs/use-gesture | 9.6K | TypeScript | MIT | |
| rubaxa/sortable | 31.1K | JavaScript | MIT | |
| shopify/draggable | 18.5K | JavaScript | MIT | |
| react-grid-layout/react-draggable | 9.3K | JavaScript | MIT | |
| bevacqua/dragula | 22.2K | JavaScript | MIT |