What Is HTML5 Drag And Drop
HTML5 drag-and-drop is an extremely powerful feature. It’s supported by most modern browsers (Chrome, Firefox, IE10, etc.) and it can be used to create some pretty interesting user interactions.
In HTML5, drag and drop is an API method that can be used to simplify moving or copying a piece of data and/or a file within a webpage (e.g images, videos, text, links, etc.).
In the past, if you wanted to add a drag and drop feature to your site or application, you would need to use a third-party plugin. With HTML5, all of the functionality is natively built in. If this functionality is what you need, it’s now extremely easy to add dragging and dropping of elements onto the page (or even between pages) to your web applications. Now that’s awesome!
The 10 Best Drag and Drop JavaScript Libraries
A drag-and-drop library adds interactive functionality to web applications through mouse, touch, or keyboard input. You can implement these libraries to create sortable lists, moveable elements, file uploaders, and visual editors without building complex event handlers from scratch.
The HTML5 Drag and Drop API provides native browser support, but most developers prefer specialized libraries that handle cross-browser compatibility, touch events, and advanced features such as auto-scrolling and snap detection. These libraries reduce development time and deliver consistent user experiences across devices.
This collection ranks the 10 best options based on three metrics: GitHub stars reflecting community adoption, active maintenance status showing reliability, and traffic data from CSSScript.com indicating real-world developer interest. Each library offers distinct features for different project requirements. I hope you like it.
Originally Published Aug 03 2018, updated Dec 17, 2025
1. Lightweight JS Sorting Library with Native HTML5 Drag and Drop – SortableJS
Sortable is a lightweight and simple JavaScript library that makes a list of items sortable by using the native HTML5 drag and drop API. Works with all the modern browsers and touch devices.
Features:
- Supports touch devices and modern browsers (including IE9)
- Can drag from one list to another or within the same list
- CSS animation when moving items
- Supports drag handles and selectable text (better than voidberg’s html5sortable)
- Smart auto-scrolling
- Advanced swap detection
- Smooth animations
- Multi-drag support
- Support for CSS transforms
- Built using native HTML5 drag and drop API
- Supports any frameworks like React, Vue, Angular, etc
- Supports any CSS library, e.g. Bootstrap
- Simple API
- Support for plugins
- Typescript definitions at @types/sortablejs
2. Pure JavaScript Drag and Drop Library – dragula.js
dragula.js is a simple, dependency-free, touch-enabled JavaScript library that provides drag and drop functionality on DOM elements.
Features:
- Super easy to set up
- No bloated dependencies
- Figures out sort order on its own
- A shadow where the item would be dropped offers visual feedback
- Touch events
- Seamlessly handles clicks without any configuration
3. Touch-enabled Draggable & Sortable Library – draggable.js
A customizable draggable/droppable/sortable/swappable JavaScript library that works with mouse drag, touch, and force touch events.
Features:
- Works with native drag, mouse, touch and force touch events
- Can extend dragging behaviour by hooking into draggables event life cycle
- Can extend drag detection by adding sensors to draggable
- The library is targeted ES6 first
4. Tiny Drag To Move JavaScript Library – dragmove.js
A tiny drag and drop library that makes any DOM element draggable by clicking the drag the handle and holding the mouse.
5. Draggable HTML/SVG Elements – PlainDraggable
A simple, performant drag and drop library that enables draggable functionality on any HTML and SVG elements with snapping and boundary support.
Features:
- Accept HTML/SVG element as an element that comes to be draggable.
- Support both mouse and touch interfaces.
- Restrict the draggable area.
- Snap the draggable element to other elements, points, lines, consecutive points (i.e. grid) or something.
- Scroll an element or window automatically when the draggable element was moved to edge of the area.
- Use requestAnimationFrame API, translate and will-change CSS if possible, for high performance.
- Provide only basic methods, easy and simple usage.
6. Touch-enabled Drag/Rotate/Resize/Snap Library – subjx
A JavaScript library that enables touch-friendly rotate, resize, and drag’n’drop functionalities on HTML elements and/or SVG objects.
7. Sort Nested Lists With Drag And Drop – nested-sort
A JavaScript library to dynamically generate a tree-like list of nested items that are sortable via drag and drop.
8. Create Interactive HTML Elements with Drag, Resize, and Rotate – Draggable.js
A lightweight JavaScript library that enables draggable, resizable, and rotatable functionalities for HTML elements. It works on various HTML elements, including images, and supports multi-touch gestures.
You can drag elements by clicking or touching and moving them. The resizable and rotatable functionalities, activated by a handle in the bottom right corner, provide additional control.
9. Create Draggable/Resizable/Scalable/Rotatable/Warpable Element – moveable
A JavaScript library that makes an element draggable, resizable, scalable, scrollable, rotatable, roundable, clippable, and wrappable.
Features:
- Draggable refers to the ability to drag and move targets.
- Resizable indicates whether the target’s width and height can be increased or decreased.
- Scalable indicates whether the target’s x and y can be scale of transform.
- Rotatable indicates whether the target can be rotated.
- Warpable indicates whether the target can be warped (distorted, bented).
- Pinchable indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.
- Groupable indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.
- Snappable indicates whether to snap to the guideline.
- OriginDraggable indicates Whether to drag origin.
- Clippable indicates Whether to clip the target.
- Roundable indicates Whether to show and drag or double click border-radius.
- Support SVG Elements (svg, path, line, ellipse, g, rect, …etc)
- Support Major Browsers
- Support 3d Transform
10. Draggable/Droppable/Sortable Components In Vanilla JavaScript – Agnostic Draggable
An easy-to-use, framework-agnostic drag’n’drop JavaScript library that enables any element to be draggable, droppable, and sortable.
Which Drag and Drop Library Should You Use?
For sortable lists with framework support: SortableJS provides official React, Vue, and Angular adapters with TypeScript definitions. The native HTML5 API implementation keeps bundle size minimal while delivering comprehensive sorting features.
For minimal dependencies: dragula.js offers zero-dependency drag and drop with automatic sort detection. The 15KB size suits projects avoiding dependency bloat.
For SVG manipulation: PlainDraggable and moveable both support SVG elements. PlainDraggable works better for simple dragging with snap detection. moveable handles complex transformations including warp and 3D operations.
For mobile-first applications: draggable.js and subjx include force touch and multi-touch gesture support. These libraries detect touch-specific interactions beyond basic tap events.
For nested hierarchies: nested-sort specializes in tree structures with cross-level dragging. The library handles parent-child relationships automatically.
For visual editors: moveable delivers the most transformation options including rotate, resize, scale, warp, and clip. subjx provides a simpler alternative with drag, rotate, and resize.
FAQ:
Which drag and drop library works best with React?
SortableJS offers official React bindings through react-sortablejs with TypeScript support. The library wraps SortableJS functionality in React components while maintaining all core features including multi-drag and auto-scroll. draggable.js from Shopify also provides strong React integration as it originated from their React component needs.
Do these libraries support touch devices?
Most modern drag and drop libraries include touch event support. SortableJS, dragula.js, draggable.js, PlainDraggable, and subjx all handle touch interactions. draggable.js extends support to force touch gestures on devices with pressure-sensitive screens. Verify touch support in library documentation before selection.
What is the difference between HTML5 native drag and drop and library implementations?
The HTML5 Drag and Drop API provides browser-native functionality but lacks touch support and requires verbose event handling code. Libraries such as SortableJS build on the native API while adding touch support, auto-scrolling, and simplified configuration. Other libraries like dragula.js implement custom drag detection for more consistent cross-browser behavior.
More Resources:
To find more JavaScript libraries to create draggable and sortable elements on the web app, don’t forget to check out our other awesome resources: