December 25, 2022

Top 7 Open Source Draggable UI Component Libraries for the Web


Here is a collection of the most popular libraries for building UIs with draggable components in React or vanilla Js.

1. React-beautiful-dnd

Beautiful and accessible drag and drop for lists with React

React-beautiful-dnd is the most popular drag-and-drop library, known for its high performance and powerful API. Build by Atlassian, it appears to have paused active development.

2. Draggable

Draggable is a modern drag and drop JavaScript library. Lightweight, modular and accessible

Draggable is a powerful library. It was originally created by Shopify, but it’s now no longer maintained.

3. React-dnd

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled. It is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and the components change their appearance and the application state in response to the drag and drop events

4. Interact.js

JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)

Interact.js supports inertia and snapping, as well as multi-touch and simultaneous interactions.

5. React-Draggable

A simple component for making elements draggable

React-Draggable is, as the name suggests, a library for building draggable components in React. Seems like a very solid and simple solution for adding this capability to a React project.

Part of React-Grid-Layout. A great choice if the goal is to build a grid layout UI with drag and drop in React.

6. Draggabilly

Make that shiz draggable

Rad because it supports mouse and touch devices

Draggabilly is a vanilla JS library for implementing drag-n-drop capabilities.

7. React-rnd

A resizable and draggable component for React

React-rnd is a simple and lightweight implementation of DnD in React.

Bonus: Additional Resources

December 25, 2022 · #miscellaneous


Discuss on Twitter ↗

Sign up for the mailing list

Previous:AI Skepticism: A Look at the Ethics and Future of AI Art
Next:Encouraging Proactive Behavior in Your Team to Foster a Culture of Initiative and Innovation