HTML5 drag and drop is a built-in functionality provided by HTML5 that allows users to grab an object and drag it to a different location within the application.

While it provides basic drag and drop functionalities, it can be complex to implement and lacks some advanced features.

On the other hand, JavaScript Drag and Drop libraries provide a more simplified, user-friendly API to implement the same functionality. These libraries often come with additional features such as support for files and directories, excellent browser compatibility, and easy styling.

They also allow for more complex drag and drop scenarios, such as dragging multiple items at once, and integrating with other JavaScript frameworks.

This makes JS Drag and Drop libraries a more powerful and flexible option for implementing drag and drop features.

1. Dragula

This is a free drag-and-drop library for vanilla JavaScript, Angular, and React.

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
  • can be used directly from the CDN.
GitHub - bevacqua/dragula: :ok_hand: Drag and drop so simple it hurts
:ok_hand: Drag and drop so simple it hurts. Contribute to bevacqua/dragula development by creating an account on GitHub.
GitHubbevacqua

2. Dragact

Dragact is a a reactive drag-and-drop library for React. It is a fast library that supports responsive design, grid and auto-layout.

Features

  • Auto-layout grid system
  • Can also be operated on mobile phones
  • Highly adaptive
  • static components
  • Drag and drop components
  • Auto scaling components
  • Custom drag handle
  • Custom zoom handle
  • Responsive layout

Project Status

The development has stopped for this package and the developer recommends other libraries.

GitHub - Foveluy/Dragact: a dragger layout system with React style .
a dragger layout system with React style . . Contribute to Foveluy/Dragact development by creating an account on GitHub.
GitHubFoveluy

3. Interact.js

Interact.js is a JavaScript library for drag and drop, resizing, and multi-touch gestures. It is compatible with modern browsers and IE9+, and provides a simple, flexible API for moving elements around.

Features

  • Free and open source
  • Powerful snap and restriction modifiers
  • Inertial throwing
  • Multiple simultaneous interactions
  • Unified API for touch and mouse events
  • Auto scroll
  • Support for HTML and SVG
  • Rich documentation
  • Supports touch geastures.
interact.js - JavaScript drag and drop, resizing and multi-touch gestures for modern browsers
JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)
JavaScript drag and drop, resizing and multi-touch gestures for modern browsers

4. DFlex

DFlex is a modern drag-and-drop JavaScript library that manipulates the DOM directly, rather than reconstructing it.

It includes its own scheduler and reconciler, allows for custom functionality, and is designed for high performance with minimal layout shifts. It's a pure JavaScript solution suitable for all frameworks, and also provides a collection of DOM utility packages.

Features

  • Enhanced transformation mechanism
  • Unique approach to DOM manipulation
  • In-built scheduler and reconciler
  • Exposes node manipulations
  • Vanilla JavaScript construction
  • Native API
  • Prevents lagging and minimizes layout shift
  • Collection of DOM utility packages
  • Prevents bloated production bundles
  • Dynamic architecture
  • Traverse DOM without calling browser API
  • Infinite DOM transformation
  • Customized and enhanced reconciler
  • Isolated from data flow with a scheduler
  • Animated transformation
  • Headless and compatible with modern JS frameworks
  • Individual targeting of each DOM element
  • Event driven and fully customized API
  • Extensible using its own matching algorithm
  • Supports three types of restrictions
  • Supports four types of custom events and custom layout state emitter
DFlex | The Javascript library for modern Drag and Drop Apps
A Drag-and-Drop library that manipulates the DOM instead of reconstructing it and has its own scheduler and reconciler.
DFlex

5. Sortable

SortableJS is a free JavaScript library that allows for reorderable drag-and-drop lists.

Features

  • Simple list creation
  • Shared lists
  • Cloning of items
  • Disabling sorting
  • Handles for managing items
  • Filters for non-draggable items
  • Adjustable thresholds for swapping
  • Support for various frameworks and plugins like MultiDrag and Swap.
SortableJS
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.

6- Draggable

Draggable is a comprehensive JavaScript Drag & Drop library that abstracts native browser events into an API for creating custom drag and drop experiences. It comes with additional modules: Sortable, Droppable, Swappable, which are built on top of Draggable and provide a similar API interface.

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
Draggable JS – JavaScript drag and drop library
Draggable is a lightweight, responsive, modern drag and drop JavaScript library – the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps.
draggable.js
Draggable JS – JavaScript drag and drop library
Draggable is a lightweight, responsive, modern drag and drop JavaScript library – the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps.
draggable.js
GitHub - Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.
The JavaScript Drag & Drop library your grandparents warned you about. - Shopify/draggable
GitHubShopify

7. DragSelect

DragSelect is an easy JavaScript library for selecting and moving elements. With no dependencies. Drag-Select & Drag-And-Drop.

Features

  • No dependencies
  • Highly customizable
  • Replicates OS drag-selection in the browser
  • Accessibility (a11y)
  • Use of modifier keys for independent selections
  • Keyboard support for selection, drag, and drop
  • Supports all major browsers
  • Lightweight (only gzip size)
  • High npm download count
  • Designed with performance in mind (can select >15,000 elements)
  • Supports SVG
  • Mobile (touch interaction) support
  • Free and open source
  • User-friendly
GitHub - ThibaultJanBeyer/DragSelect: An easy JavaScript library for selecting and moving elements. With no dependencies. Drag-Select & Drag-And-Drop. – Examples:
An easy JavaScript library for selecting and moving elements. With no dependencies. Drag-Select & Drag-And-Drop. – Examples: - ThibaultJanBeyer/DragSelect
GitHubThibaultJanBeyer

8. jQuery.Filer

This is a free and open-source drag-and-drop library/ plugin for jQuery. It transforms the File Input with features such as multiple file selection, drag and drop support, various validations, thumbnails, icons, instant upload, print-screen upload, and many other options.

Features

  • Completely change File Input
  • Upload files after choosing
  • Add more files to input without uploading them
  • Validate files(limit, size, extension)
  • Create thumbs
  • Custom icons for each type of file
  • Custom templates & themes for: input, thumbs, icons
  • Remove Choosed/Uploaded files
  • Append existing files to input for a preview
  • Image paste from clipboard
  • Custom captions
  • Custom callbacks
  • Templates inline variables, ex: {{fi-limit}}
  • All icons in a one beautiful font
  • Drag & Drop Option
  • API Methods and values
GitHub - gerardbalaoro/jquery.filer: jQuery.filer - Simple HTML5 file uploader plugin tool for jQuery
jQuery.filer - Simple HTML5 file uploader plugin tool for jQuery - gerardbalaoro/jquery.filer
GitHubgerardbalaoro

9. DND (React)

React DnD is a library that provides drag and drop functionality for React.

GitHub - react-dnd/react-dnd: Drag and Drop for React
Drag and Drop for React. Contribute to react-dnd/react-dnd development by creating an account on GitHub.
GitHubreact-dnd

10. FormKit’s Drag and Drop

FormKit’s Drag and Drop is a small library for adding data-first drag and drop sorting and transferring for lists in your app. It’s simple, flexible, framework agnostic, and clocks in at only ~4Kb gzipped.

GitHub - formkit/drag-and-drop
Contribute to formkit/drag-and-drop development by creating an account on GitHub.
GitHubformkit

11. React-beautiful-dnd

React-beautiful-dnd (rbd) is a drag and drop library for lists with React.

It features beautiful and natural movement of items, strong accessibility with keyboard and screen reader support, high performance, a clean and powerful API, and compatibility with standard browser interactions. It also offers unopinionated styling and does not create additional wrapper DOM nodes.

GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
Beautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dnd
GitHubatlassian

12. drag-drop

The HTML5 drag and drop API is complex, but the JS Drag and Drop Libraries aim to simplify it with a user-friendly API. This library supports files and directories, has excellent browser compatibility, adds a drag class to the drop target on hover for easy styling, and optionally provides the file(s) as a Buffer.

GitHub - feross/drag-drop: HTML5 drag & drop for humans
HTML5 drag & drop for humans. Contribute to feross/drag-drop development by creating an account on GitHub.
GitHubfeross

13. DragDropiOS (Swift)

DragDropiOS is a drag and drop manager for iOS, supporting multiple UIView classes. It includes UICollectionView and UITableView implementations of the drag and drop manager.

GitHub - KevinZhouRafael/DragDropiOS: DragDropiOS is a drag and drop manager on iOS. It supports drag and drop with in one or more classes extends UIView. This library contains UICollectionView and UITableView that implenment of drag and drop manager.
DragDropiOS is a drag and drop manager on iOS. It supports drag and drop with in one or more classes extends UIView. This library contains UICollectionView and UITableView that implenment of drag…
GitHubKevinZhouRafael

14. dragNdrop

This is a free and open-source easy javascript drag and drop plugin – works in IE5.

Key Features

  • Add draggability to any DOM element
  • Add corresponding drop containers
  • Callback, Classes and Events available
  • Awesome browser support, works even on IE5
  • Ease of use
  • Lightweight, only 1KB gzipped
  • Performance: dragNdrop uses hardware accelerated css by default which makes it hyper fast. (gracefully falls back to normal position manipulation if browser doesn’t support it)
  • Free & open source under MIT License
  • Run from CDN.
GitHub - ThibaultJanBeyer/dragNdrop: easy javascript drag and drop plugin – works in IE5 – Example:
easy javascript drag and drop plugin – works in IE5 – Example: - GitHub - ThibaultJanBeyer/dragNdrop: easy javascript drag and drop plugin – works in IE5 – Example:
GitHubThibaultJanBeyer