Drag and drop library

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

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

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

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

Vue.Draggable is a user interface component for Vue that enables drag-and-drop list reordering. It functions as a declarative wrapper for the Sortable.js library, providing a specialized list element that synchronizes the visual order of elements with an underlying data model. The project supports complex interactive layouts, including the ability to transfer items between multiple containers and clone items during the drag process. It provides mechanisms to restrict drag initiation to specific handle elements and allows for the embedding of static content within the draggable area. The fram

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

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 project is a declarative drag-and-drop library designed for building accessible and fluid interface interactions within web applications. It provides a component-based interface for managing complex list reordering and spatial relationships between elements, utilizing a specialized state container to coordinate movement logic. The library distinguishes itself through a focus on accessibility, maintaining a live connection between visual drag states and the browser accessibility tree to support screen readers and keyboard navigation. It optimizes performance by bypassing standard componen

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

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

This project is a jQuery plugin designed for creating responsive grid interfaces that support interactive drag-and-drop reordering and manual resizing of elements. It provides a framework for managing structured layouts where content can be organized into a grid system that automatically adjusts to maintain visual alignment. The library enables users to customize dashboards by rearranging and scaling widgets through mouse-based interactions. It utilizes a coordinate-based system to detect collisions and ensure that elements snap into valid slots, while providing callback functions to monitor

Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures. The library uses a web worker layout engine to offload heavy coordinate calculations to background threads, maintaining interface responsiveness during complex rearrangements. The system provides interactive capabilities for moving items between multiple containers, filtering visibility based

Pragmatic Drag and Drop is a TypeScript library that provides a complete system for implementing drag and drop interactions in web applications. It handles the full lifecycle of drag operations, from registering drop targets and monitoring drag events to managing cleanup functions, all through a structured adapter-based approach. The library supports a wide range of data manipulation patterns, including reordering items within lists, tables, trees, virtual lists, and side navigation, as well as moving items between lists and across columns in a board layout. It also enables swapping items in

Angular directives using the native HTML Drag And Drop API

🐴 Vue directives for modifying lists with the HTML5 drag & drop API.