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 Feb 21 2023
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. dragula.js
dragula.js is a simple, dependency-free, touch-enabled JavaScript library that provides drag and drop functionality on DOM elements.
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.
4. Create Draggable/Resizable/Scalable/Rotatable/Warpable Element – moveable
A JavaScript library that makes an element draggable, resizable, scalable, scrollable, rotatable, roundable, clippable, and wrappable.
5. Lightweigt HTML5 Drag And Drop Sortable Library – html5sortable
A lightweight and standalone JavaScript library for re-sorting a group of list and/or grid items using native HTML5 drag and drop API. Supports exclude, nested, connected lists and even table rows.
6. Tiny Fast Draggable Component – neodrag
a lightweight, open-source, multi-framework library for dragging, dropping, and resizing elements on the web using pointer-events.
7. 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.
8. Draggable HTML/SVG Elements – PlainDraggable
A simple, performant drag and drop library which enables draggable functionality on any HTML and SVG elements with snapping and boundary support.
9. smooth-dnd
A fast and lightweight drag&drop, sortable library for with many configuration options covering many d&d scenarios. There is no external dependencies. It uses css transitions for animations so it’s hardware accelerated whenever possible.
10. Touch-enabled Drag And Drop JavaScript Library – DragDropTouch
A JavaScript polyfill that enables the native HTML5 drag and drop functionality on mobile touch devices.
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: