2024-11-06
2805
#react
Paramanantham Harrison
6309
Nov 6, 2024 ⋅ 10 min read

How to implement drag and drop in React with React DnD

Paramanantham Harrison Web and mobile app developer. Love exploring the depth of JS fullstack development. React, Vue, React Native, Next JS, and GraphQL are my current love interests. Find me online at learnwithparam.com.

Recent posts:

next js link component

How to use the Next.js Link component to optimize navigation

With features like automatic prefetching and seamless integration with dynamic routing, Link helps you create a fast and responsive web application.

Chimezie Innocent
Mar 31, 2025 ⋅ 5 min read
tanstack table react table

A complete guide to TanStack Table (formerly React Table)

Discover how to use TanStack Table, formerly known as React Table, to build a table UI for a variety of use cases.

Paramanantham Harrison
Mar 28, 2025 ⋅ 14 min read
javascript object prototypes

JavaScript prototypes: How objects inherit properties and methods

Explore what prototypes are, how the prototype chain works, and how to use the prototype chain to create inheritance between objects.

Ibadehin Mojeed
Mar 28, 2025 ⋅ 7 min read
set up Node.js with TypeScript and Express

How to set up TypeScript with Node.js and Express

Set up TypeScript with Node.js and Express, focusing on configuring key elements for a smooth development experience.

Aman Mittal
Mar 28, 2025 ⋅ 9 min read
View all posts

6 Replies to "How to implement drag and drop in React with React DnD"

  1. how the dropped images will be removed if we want to remove them or if we want to resize,crop,save them then how it will be performed plz help

  2. This is a great tutorial 😀 I just have a question about the onUpdate prop in the ImageList component as it seems to come and go in your code snippets. I removed it in my code but I was wondering what it does? Also I’m having trouble with the props drilling so if you could maybe do a tutorial on that at some point in the future that would be great. Thanks again for the awesome tutorial!

  3. – Removing will be just removing from the state
    – Resize, crop and save is completely a different need from drag and dropping elements. For resizing and cropping an image, you either need separate library to handle it (either in the frontend or in the backend)
    – Saving an image after cropping requires backend API to save it somewhere (S3, own server storage).

    This blog just demonstrate the drag and drop functionality. You can look for articles which do resize, crop and save images in server specifically. You will find many article on your favourite language or server side frameworks.

  4. Thanks this article really helped me to solve drag&drop)

    for beginners: if you strugled with this post, make sure you know how React references works, all code here is working good, so no way to say author missed something)

    and DND is nice because if compare to other libs it don’t kill props population for nested childs which is great, as I used other npm package for drag&drop and it kills all which is totally wrong

  5. Great tutorial. Works well for the use case, but did you face any problems with autoscrolling, how did you solve it?

    It seems React-Dnd does not support autoscrolling when you drag an element to edges, out of the box.
    also the preview generation in touch devices isn’t that controllable.

Leave a Reply