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
In this article, you can find a list of the 10 best drag and drop libraries in JavaScript. These libraries will help you to implement the standard drag and drop functionality with ease in your web application.
Whether you want to move an element with mouse or with keyboard, just choose the right library to use, copy and paste its code in your project, and you are done. Let’s get started.
Originally Published Aug 03 2018, updated Jan 13 2025
1. Sortable
Sortable is a lightweight and simple javascript library that makes a list of items sortable by using native Html5 drag and drop API. Works with all the modern browsers and touch devices.
2. Tiny Fast Draggable Component – neodrag
A lightweight, open-source, multi-framework library for dragging, dropping, and resizing elements on the web using pointer-events.
3. Create Draggable/Resizable/Scalable/Rotatable/Warpable Element – moveable
A JavaScript library that makes an element draggable, resizable, scalable, scrollable, rotatable, roundable, clippable, and wrappable.
4. dragula.js
dragula.js is a simple, dependency-free, touch-enabled JavaScript library that provides drag and drop functionality on DOM elements.
5. 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.
6. Reordering Grid Items Via Drag and Drop – Grabbable
A lightweight and easy-to-use JavaScript library that enables your users to re-sort a group of grid items through mouse drag and drop.
7. 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.
8. Drag/Resize/Minimize/Maximize/Close Any Elements – interactiveJS
The interactiveJS JavaScript library helps you create draggable, resizable, dockable windows from any HTML elements. The library allows your user to drag, resize, minimize, maximize and close your HTML elements. You can choose which of the previous interactions are allowed.
9. Mobile-friendly Drag And Drop JavaScript Library – Drog.js
A tiny (1kb minified), cross-browser, and mobile-friendly drag and drop JavaScript library.
10. Tiny Draggable & Resizable Library – resizedrag.js
A tiny JavaScript library that makes DOM elements draggable (moveable) and resizable.
Conclusion:
Drag and drop support is an incredibly common feature in web development these days, and it’s something that you need to know how to incorporate on your own site.
The concept of drag and drop has been around for a long time, but with the advent of HTML5 elements, there are now workarounds that allow for native drag and drop support in most modern browsers.
This is why I created this list introducing to you the 10 best JavaScript libraries to enhance the native HTML5 drag and drop API.
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: