draggable
The JavaScript Drag & Drop library your grandparents warned you about.
A JavaScript library that gives you full control over drag-and-drop interactions in the browser, with a unified API that works consistently across mouse, touch, and other input methods.
Draggable is a JavaScript library that gives developers full control over drag and drop behavior in the browser. Rather than relying on the browser's built-in drag and drop, the library translates native mouse, touch, force touch, and drag events into a unified, consistent API that works the same way across different environments.
The core module handles the heavy lifting: creating a visual copy of the dragged item (called a mirror), emitting events at each stage of the drag lifecycle, and managing how elements are detected and moved. Built on top of this core are additional modules — Sortable for reordering items in a list, Droppable for designating areas where items can be deposited, and Swappable for exchanging the positions of two elements. There are also plugins for features like collision detection, snapping, scrolling, and animations.
The library is written targeting ES6 and includes TypeScript type definitions. It can be installed via a package manager or loaded from a content delivery network. Documentation lives alongside the source code in each module's directory.
The readme notes that the original authors at Shopify no longer maintain the project and are looking for new contributors to take over issue triage, code review, and bug fixes.
Where it fits
- Build reorderable lists and kanban boards where users can drag items to rearrange them.
- Create custom drop zones that accept dragged elements and trigger actions when items are deposited.
- Swap the positions of two elements by dragging one onto another.
- Add visual feedback like mirrors and animations to make drag interactions feel smooth and responsive.