14 Free Drag and Drop Libraries for JavaScript, React, and Swift
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.
bevacqua2. 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.
Foveluy3. 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.
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
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.
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
Shopify
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
ThibaultJanBeyer8. 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
gerardbalaoro9. DND (React)
React DnD is a library that provides drag and drop functionality for React.
react-dnd10. 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.
formkit11. 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.
atlassian12. 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.
feross13. 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.
KevinZhouRafael14. 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.
ThibaultJanBeyer
