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:

Secure your AI-generated projects with these security practices

Secure AI-generated code with proactive prompting, automated guardrails, and contextual auditing. A practical playbook for safe AI-assisted development.

Ikeh Akinyemi
Sep 16, 2025 ⋅ 5 min read

Let’s kill vibe coding and bring back prompt engineering

Explore the vibe coding hype cycle, the risks of casual “vibe-driven” development, and why prompt engineering deserves a comeback as a critical skill for building better, more reliable AI applications.

Oscar Jite-Orimiono
Sep 16, 2025 ⋅ 11 min read
Frontend Devs Aren't Lazy, They're Burnt Out

Frontend developers are burned out, not lazy

Shipping modern frontends is harder than it looks. Learn the hidden taxes of today’s stacks and practical ways to reduce churn and avoid burnout.

Shalitha Suranga
Sep 15, 2025 ⋅ 4 min read

Can native web APIs replace custom components in 2025?

Learn how native web APIs such as dialog, details, and Popover bring accessibility, performance, and simplicity without custom components.

Daniel Schwarz
Sep 12, 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