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:

7 Common CSS Navigation Menu Mistakes And How To Fix Them

7 common CSS navigation menu mistakes and how to fix them

Navigation menu errors are common, even for seasoned developers. Learn seven common navigation menu errors and how to solve them using CSS.

Temitope Oyedele
Jun 13, 2025 ⋅ 6 min read
Comparing the top 5 React toast libraries

Comparing the top React toast libraries [2025 update]

Compare the top React toast libraries for when it’s more trouble than it’s worth to create your own custom toast components.

Nefe Emadamerho-Atori
Jun 13, 2025 ⋅ 16 min read
Comparison between TanStack Start and Next.js — two modern full-stack React frameworks with different architectural approaches.

TanStack Start vs. Next.js: Choosing the right full-stack React framework

TanStack Start vs. Next.js: both are powerful full-stack React frameworks, but they take fundamentally different approaches to architecture, routing, and developer experience. This guide breaks down their core features from SSR and data fetching to TypeScript support and deployment, to help you choose the right tool for your next React project.

Abiola Farounbi
Jun 12, 2025 ⋅ 8 min read
Angular v20 might seem boring…here are 5 reasons it’s not

Angular v20 might seem boring — Here are 6 reasons it’s not

While it may seem like a maintenance update, Angular v20 is packed with practical, production-ready upgrades that will enable us to build apps faster and with more confidence.

Yan Sun
Jun 12, 2025 ⋅ 8 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