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:

Glowing 3D cube with the MediaPipe and React logos overlaid, symbolizing integration of AI and web development

How to build better AI apps in React with MediaPipe’s latest APIs

Learn how to integrate MediaPipe’s Tasks API into a React app for fast, in-browser object detection using your webcam.

Emmanuel John
Jul 17, 2025 ⋅ 10 min read
Vercel AI SDK logo on a 3D black grid background

How to build unified AI interfaces using the Vercel AI SDK

Integrating AI into modern frontend apps can be messy. This tutorial shows how the Vercel AI SDK simplifies it all, with streaming, multimodal input, and generative UI.

Ikeh Akinyemi
Jul 16, 2025 ⋅ 13 min read
how to prepare for a software engineering interview

How to prep for a software dev interview: Advice from a dev leader

Interviewing for a software engineering role? Hear from a senior dev leader on what he looks for in candidates, and how to prepare yourself.

Andrew Evans
Jul 16, 2025 ⋅ 12 min read
Next.js Real-Time Video Streaming: HLS.js And Alternatives

Next.js real-time video streaming: HLS.js and alternatives

Set up real-time video streaming in Next.js using HLS.js and alternatives, exploring integration, adaptive streaming, and token-based authentication.

Jude Miracle
Jul 15, 2025 ⋅ 19 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