Open-source alternatives to Draggable

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

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

Vue.Draggable is a component-based library for Vue.js that enables drag-and-drop functionality within web interfaces. It functions as a wrapper for the SortableJS engine, bridging the gap between imperative DOM manipulation and the declarative nature of the Vue.js reactive system. By synchronizing user interface interactions with the underlying data model, it ensures that list reordering and element movement are automatically reflected in the application state. The library supports complex interaction patterns, including the ability to move items between lists, clone elements using keyboard m

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

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

React-dnd is a drag and drop framework and library for React applications. It provides a system of higher-order components and hooks to implement draggable interface elements and drop targets using a declarative API. The framework separates the logic of moving items from the visual presentation of the user interface. This allows for the development of interactive interfaces, such as visual list reordering and custom dashboard layouts where widgets or panels can be reorganized.

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

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

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

This project is a drag-and-drop UI library and a Vue 3 component for implementing sortable lists and state-synced interfaces. It acts as a wrapper for the Sortable.js library, providing a state-synced list component that automatically updates the underlying data array when items are reordered or moved. The library supports nested draggable interfaces and hierarchical data organization, allowing draggable containers to be nested inside other movable items to create multi-level structures. It also enables multi-column data transfer, allowing elements to be moved or cloned between different drag

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

Masonry is a JavaScript library for arranging elements of varying heights into a grid without vertical gaps. It serves as a DOM element positioner and dynamic layout manager that calculates and applies absolute coordinates to HTML elements based on available vertical space. The system functions as a responsive grid engine using percentage-based widths to maintain consistent structures across different screen sizes. It includes capabilities to recalculate grid positions after images load or browser windows resize to prevent element overlap. The library covers grid management and positioning,

This is a collection of small JavaScript projects and code samples that demonstrate the implementation of fundamental programming concepts through practical applications. The repository serves as a reference for building interactive user interfaces, managing application state, and integrating external APIs using vanilla JavaScript. The project focuses on the use of standard JavaScript without external frameworks to create interface elements such as modals, sliders, and galleries. It provides examples of organizing complex application logic through object-oriented patterns using classes and ob

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

This repository contains the HTML specification, which defines the core standards for web page structuring, content organization, and document rendering. It establishes the fundamental algorithms for state-machine-based tokenization, tree construction for the document object model, and origin-based security isolation. The specification provides a framework for defining custom elements with independent lifecycles and registries. It also details the requirements for cross-document communication, session history management, and the synchronization of interface properties with content attributes.

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

This is a React drag and drop library designed for building accessible draggable lists and reorderable elements. It provides a cross-input interaction framework that manages events across mouse, touch, and custom sensor inputs to create interactive user interfaces. The library includes a virtualized list manager to maintain high frame rates when handling large datasets by processing only the elements currently visible on the screen. It also supports custom input sensor integration, allowing for the registration of specialized input types to trigger and control drag operations. The system cov

vue-draggable-plus is a drag-and-drop library for Vue 2 and Vue 3 used to create data-bound draggable interfaces. It provides components for implementing list sorting and reordering elements within a sequence while synchronizing the visual position of items with the underlying application state. The library includes a cross-list transfer tool that enables the movement of items between multiple containers using shared group identifiers and cloning rules. Interaction can be restricted to specific child elements through handle-based triggering. The project covers a broad range of drag-and-drop

Hover is a collection of pre-defined CSS3 animations and reusable stylesheets for links, buttons, and images. It serves as a web UI animation kit and a library of styles written in CSS, Sass, and LESS to provide visual feedback when a user hovers over an element. The library includes specialized interactive effects that simulate tactile behaviors, such as page curls and the rendering of speech bubbles. It also provides a set of animation primitives to manipulate backgrounds, borders, shadows, and glow effects to simulate depth and elevation. The project covers a wide range of element motion

Magic of CSS is a structured tutorial series that teaches web developers advanced CSS layout, typography, and animation techniques through hands-on examples. The course covers the full spectrum of CSS capabilities, from foundational box model and positioning concepts to sophisticated animation and interactive state management, all without relying on JavaScript. The series distinguishes itself by teaching practical, real-world CSS patterns such as inline-block justified grids, percentage-based absolute positioning, table-display vertical centering, and letter-span styling techniques. It demons

Glidejs is a lightweight, dependency-free JavaScript library for creating sliders and carousels. It functions as a standalone UI component and content slider that supports ES6. The library uses a modular architecture, allowing for the extension of core logic through a plugin system to implement specialized features and custom behaviors. The project provides capabilities for implementing web carousels and interactive sliding interfaces. It integrates sliding content displays into webpages without the use of external libraries or frameworks.

BadgeView is a custom UI component for Android that displays numeric or text notification indicators on other view elements. It is built as a Material Design component that functions as an animated and interactive view for signaling alerts or item counts. The component distinguishes itself through support for drag-to-dismiss gestures, allowing users to remove alerts from the screen via touch interactions. It also utilizes smooth visibility animations to transition state changes rather than using immediate shifts. The library covers broad UI capabilities including content management for updat

FloatingActionButton is a scroll-driven UI controller and mobile-first interface element. It provides a circular button that floats above content and toggles its visibility based on scroll direction to maximize available screen space. The component functions as a CSS-animated UI element, utilizing stylesheet transitions to handle the visual sliding and fading of the interface controls. It is designed for mobile interfaces to provide quick access to primary actions without obscuring page content. The system manages visibility by monitoring scroll events on a designated DOM container and detec

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

UltimateRecyclerView is an advanced list component for Android that provides built-in support for animations, sticky headers, and pull-to-refresh. It functions as a specialized set of UI elements designed to handle draggable, expandable, infinite-scrolling, and swipeable list interfaces. The project includes a draggable list manager for reordering items through drag-and-drop interactions and an expandable list component for toggling additional item details. It implements a swipe-to-dismiss interface for item removal and a list controller that enables infinite scroll pagination by triggering d

cardslib is an Android UI component library and card layout framework. It provides a set of specialized adapters and views designed as an extension for high-performance card rendering within recycling lists. The library distinguishes itself through a reorderable list implementation that supports drag-and-drop item rearrangement and nested content hierarchies. It also includes an interaction system for managing directional swipe constraints and a customizable undo action notification bar. The framework covers a broad range of card-based interface capabilities, including the composition of vis

This library provides a set of directives for building sortable, hierarchical user interfaces within the Angular framework. It leverages the native HTML5 drag-and-drop API to enable direct manipulation of data objects, allowing users to reorder items and manage complex list structures through intuitive browser interactions. The project distinguishes itself by supporting nested data visualization, enabling the creation of tree structures that maintain their hierarchy during drag-and-drop operations. It offers granular control over these interactions through custom drag handles, which restrict