https://github.com/phuocng/react-drag-drop
Master the art of drag and drop in React
https://github.com/phuocng/react-drag-drop
dnd drag-and-drop reactjs
Last synced: 7 months ago
JSON representation
Master the art of drag and drop in React
- Host: GitHub
- URL: https://github.com/phuocng/react-drag-drop
- Owner: phuocng
- License: mit
- Created: 2023-11-04T00:13:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-25T06:56:03.000Z (almost 2 years ago)
- Last Synced: 2025-03-16T22:36:20.313Z (7 months ago)
- Topics: dnd, drag-and-drop, reactjs
- Language: TypeScript
- Homepage: https://phuoc.ng/collection/react-drag-drop/
- Size: 97.7 KB
- Stars: 92
- Watchers: 2
- Forks: 2
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Drag and drop in React
Modern web applications offer a useful feature that allows users to drag and drop elements around the page. This creates a more intuitive and user-friendly experience, and it's become increasingly popular in recent years. In fact, drag and drop functionality has become so common that it's hard to imagine a modern web application without it. From social media platforms to e-commerce websites, drag and drop has become a staple of the user experience.
The reason for its popularity is simple: drag and drop is a powerful tool that can simplify complex tasks and make the user's life easier. You can find drag and drop functionality in a variety of real-world applications. For example, when using a file manager on your computer, you can drag files from one folder to another or onto an external drive. In video editing software, you can drag and drop clips onto a timeline to create a sequence. And in graphic design applications, you can drag and drop images and text boxes to create layouts.
On the web, drag and drop functionality can be used for a variety of purposes, such as moving items around in a to-do list or task manager, rearranging playlists or albums in music streaming services, or sorting products into a shopping cart or wishlist on e-commerce websites.
Implementing drag and drop functionality may require some additional coding compared to simple form inputs, but the benefits are well worth it. If you're a React developer, you'll be happy to know that this series can help you become a **master of dragging and dropping** within your React app. You'll get **real-world examples** and gradually work your way up to more advanced techniques. And the best part? We **won't be using any external libraries**, so you can see firsthand how it all works under the hood.
Get ready to elevate your React app with drag and drop functionality. Your users will love it!
> If you found this series helpful, please consider giving this GitHub repository a star or sharing it on your favorite social networks 😍. Your support would mean a lot to me!
## Table of contents
* [01: Make a given element draggable](#01-make-a-given-element-draggable)
* [02: Make an element draggable on touchscreen devices](#02-make-an-element-draggable-on-touchscreen-devices)
* [03: Create a custom draggable hook](#03-create-a-custom-draggable-hook)
* [04: Create a range slider](#04-create-a-range-slider)
* [05: Create an RGB to HEX color converter](#05-create-an-rgb-to-hex-color-converter)
* [06: Create resizable split views](#06-create-resizable-split-views)
* [07: Create a drawer](#07-create-a-drawer)
* [08: Create an image comparison slider](#08-create-an-image-comparison-slider)
* [09: Scroll by dragging](#09-scroll-by-dragging)
* [10: Build a custom scrollbar](#10-build-a-custom-scrollbar)
* [11: Make a given element resizable](#11-make-a-given-element-resizable)
* [12: Resize columns in a table](#12-resize-columns-in-a-table)
* [13: Constrain a draggable element within its container](#13-constrain-a-draggable-element-within-its-container)
* [14: Build a color picker](#14-build-a-color-picker)
* [15: Craft an image cropper](#15-craft-an-image-cropper)
* [16: Build a magnifying glass for images](#16-build-a-magnifying-glass-for-images)
* [17: Select a portion of an element by clicking and dragging](#17-select-a-portion-of-an-element-by-clicking-and-dragging)
* [18: Crop a portion of an image](#18-crop-a-portion-of-an-image)
* [19: Add annotations to an image](#19-add-annotations-to-an-image)
* [20: Take a screenshot of a portion of an element](#20-take-a-screenshot-of-a-portion-of-an-element)
* [21: Drag an element along a circle](#21-drag-an-element-along-a-circle)
* [22: Create a radial progress bar](#22-create-a-radial-progress-bar)
* [23: Create a time picker](#23-create-a-time-picker)
* [24: Snap a draggable element to a grid](#24-snap-a-draggable-element-to-a-grid)
* [25: Create a linear gauge with discrete values](#25-create-a-linear-gauge-with-discrete-values)
* [26: Use vertical and horizontal lines as guides for element positioning](#26-use-vertical-and-horizontal-lines-as-guides-for-element-positioning)
* More tutorials are on the way! Stay tuned for updates.
## 01: Make a given element draggable
Learn how to create a draggable element in React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/make-a-given-element-draggable/)
- [Source](/01-make-a-given-element-draggable)
## 02: Make an element draggable on touchscreen devices
Learn how to support drag and drop on touchscreen devices.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/make-an-element-draggable-on-touchscreen-devices/)
- [Source](/02-make-an-element-draggable-on-touchscreen-devices)
## 03: Create a custom draggable hook
Learn how to create your very own React hook to add this draggable functionality, making it easy to reuse in different places.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-a-custom-draggable-hook/)
- [Source](/03-create-a-custom-draggable-hook)
## 04: Create a range slider
Learn how to develop a range slider component in React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-a-range-slider/)
- [Source](/04-create-a-range-slider)
## 05: Create an RGB to HEX color converter
Learn how to use a range slider to build our own RGB to HEX color converter.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-an-rgb-to-hex-color-converter/)
- [Source](/05-create-an-rgb-to-hex-color-converter)
## 06: Create resizable split views
Learn how to create resizable split views with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-resizable-split-views/)
- [Source](/06-create-resizable-split-views)
## 07: Create a drawer
Learn how to create a Drawer component using React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-a-drawer/)
- [Source](/07-create-a-drawer)
## 08: Create an image comparison slider
Learn how to create an image comparison slider with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-an-image-comparison-slider/)
- [Source](/08-create-an-image-comparison-slider)
## 09: Scroll by dragging
Explore how to implement drag-to-scroll functionality with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/scroll-by-dragging/)
- [Source](/09-scroll-by-dragging)
## 10: Build a custom scrollbar
Learn how to create a custom scrollbar with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/build-a-custom-scrollbar/)
- [Source](/10-build-a-custom-scrollbar)
## 11: Make a given element resizable
Learn how to make an element resizable using React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/make-a-given-element-resizable/)
- [Source](/11-make-a-given-element-resizable)
## 12: Resize columns in a table
Learn how to resize columns by dragging the border using React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/resize-columns-in-a-table/)
- [Source](/12-resize-columns-in-a-table)
## 13: Constrain a draggable element within its container
Learn how to keep a draggable element within its parent container with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/constrain-a-draggable-element-within-its-container/)
- [Source](/13-constrain-a-draggable-element-within-its-container)
## 14: Build a color picker
Explore how to create a color picker with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/build-a-color-picker/)
- [Source](/14-build-a-color-picker)
## 15: Craft an image cropper
Learn how to create an image cropper using React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/craft-an-image-cropper/)
- [Source](/15-craft-an-image-cropper)
## 16: Build a magnifying glass for images
Show you how to create an image magnifier with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/build-a-magnifying-glass-for-images/)
- [Source](/16-build-a-magnifying-glass-for-images)
## 17: Select a portion of an element by clicking and dragging
Explore how to implement click and drag selection with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/select-a-portion-of-an-element-by-clicking-and-dragging/)
- [Source](/17-select-a-portion-of-an-element-by-clicking-and-dragging)
## 18: Crop a portion of an image
Explore how to crop a portion of an image using React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/crop-a-portion-of-an-image/)
- [Source](/18-crop-a-portion-of-an-image)
## 19: Add annotations to an image
Learn how to add annotations to an image using React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/add-annotations-to-an-image/)
- [Source](/19-add-annotations-to-an-image)
## 20: Take a screenshot of a portion of an element
Learn how to take a screenshot of a portion of an element with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/take-a-screenshot-of-a-portion-of-an-element/)
- [Source](/20-take-a-screenshot-of-a-portion-of-an-element)
## 21: Drag an element along a circle
Learn how to drag an element along a circle with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/drag-an-element-along-a-circle/)
- [Source](/21-drag-an-element-along-a-circle)
## 22: Create a radial progress bar
Explore how to create a radial progress bar with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-a-radial-progress-bar/)
- [Source](/22-create-a-radial-progress-bar)
## 23: Create a time picker
Explore how to create a time picker with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-a-time-picker/)
- [Source](/23-create-a-time-picker)
## 24: Snap a draggable element to a grid
Learn how to create snap-to grid functionality with React.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/snap-a-draggable-element-to-a-grid/)
- [Source](/24-snap-a-draggable-element-to-a-grid)
## 25: Create a linear gauge with discrete values
Explore how to use React to create a discrete linear gauge.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/create-a-linear-gauge-with-discrete-values/)
- [Source](/25-create-a-linear-gauge-with-discrete-values)
## 26: Use vertical and horizontal lines as guides for element positioning
Learn how to use the vertical and horizontal lines shown at the center as a guide when dragging an element around its container.
- [Tutorial](https://phuoc.ng/collection/react-drag-drop/use-vertical-and-horizontal-lines-as-guides-for-element-positioning/)
- [Source](/26-use-vertical-and-horizontal-lines-as-guides-for-element-positioning)