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 26 2022
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. Pretty Drag And Drop Upload Zone In Pure JavaScript – Dropzone
A lightweight yet configurable JavaScript library that converts the normal form element into a pretty nice drop’n’drop with file preview and upload progress support.
3. Draggable, Resizable & Rotatable Plugin
A Photoshop inspired touch-enabled draggable, resizable and rotatable library without any 3rd dependencies.
4. dragula.js
dragula.js is a simple, dependency-free, touch-enabled JavaScript library that provides drag and drop functionality on DOM elements.
5. Drag And Drop With Snap Into Place – Magnet.js
A small and standalone JavaScript library that provides drag and drop with snap into place functionality for single or grouped elements.
6. Drag/Resize/Minimize/Maximize/Close Any Elements – interactiveJS
The interactiveJS JavaScript library helps you create draggable, resizable, dockable windows from any HTML elements.
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. 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.
9. 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.
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.
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: