Multiple List Drag and Drop in React [Easiest Way]

Let's see how to implement drag and drop feature in React application. In this tutorial, we will not use any library. We will use HTML5 drop events to create React drag and drop.
🚀Access My Complete React JS Course: www.udemy.com/course/the-ulti...
💙Register for FREE Git and Github Course - forms.gle/U4cnzMX1EkWPHdX89
💌Join my FREE Email News Letter for updates: codeblessyou.ck.page/newsletter
Resources for this Application - drive.google.com/file/d/1DdWO...
🤩MY FAVORITE TOOLS & GEARS
Height Adjustable Desk - amzn.to/42qPZkb
Old Desk in Budget - amzn.to/3UlaFbm
Favorite Laptop - amzn.to/3OrqmKa
LG Monitor for Productivity - amzn.to/3uqA5tv
Silent Keyboard(Loved It) - amzn.to/3UjagGv
Mouse & Keyboard Combo - amzn.to/3Sq50hs
Extra Large Mouse Pad - amzn.to/48Nhcjv
Sony Headphones - amzn.to/3HHjYed
Cheap Earphones for Editing - amzn.to/48eBykN
Daily Use Laptop Stand - amzn.to/3Uj8JQL
Mini Speakers for Consuming Content - amzn.to/48YgAaK
Mport X Connector - amzn.to/3UoHsML
Mic - amzn.to/48eCrtD
3 Color Lightbar - amzn.to/42qgaaW
Dual Monitor Stand - amzn.to/48Nixa1
Stop Watch for Productivity - amzn.to/3Un1RBW
Dotted Diary - amzn.to/3vYBWq1
Write in comment section, Which extension you will use for the future React Project.
⏬Music & Sound Effects from: share.epidemicsound.com/7fhc2o
Copyright
Arrow - www.flaticon.com/free-icons/a...
Grab - iconduck.com/icons/259624/cur...
Social Media Links
🚀COURSES : www.udemy.com/user/code-bless...
💌News Letter : codeblessyou.ck.page/newsletter
🤩INSTAGRAM : / code_blessyou
💙FACEBOOK : / 100077716056158
🐦TWITTER : / code_blessyou
😎LINKEDIN : / code-bless-you-5b76822b
Tags
code bless you,react drag and drop,drag and drop react,react drag and drop no library,drag and drop,react drag and drop list,drag and drop javascript,react,drag and drop react js,drag and drop in react,react drag and drop tutorial,drag and drop tutorial,react drag & drop,how to react drag and drop,react drag and drop examples,how to react drag and drop list,reactjs drag and drop,how to react js drag and drop,react drag and drop image upload

[@wannabe_Akshat]

Beautifully explained ❤ Will surely use this in my future projects 🙌🏻

[@CodeBlessYou]

Glad to hear that. Thank you so much❤❤❤

[@SonRayS]

Perfect! no, just great! Thank you!

[@CodeBlessYou]

Thank you so much❤❤❤

[@dangetiharibabu886]

Bro You explanation clearly and good

[@CodeBlessYou]

Thank you so much. Glad to hear that❤❤❤

[@pratikpattnaik3425]

First i used this:
const updatedTasks = tasks.filter((task, index) => {
index !== activeCard;
});
and then i dragged a card but everything else got erased. But when i removed curly braces and ; in the arrow function and it worked fine. Can u explain why

[@CodeBlessYou]

because in callback function, we have to return condition. And if you add curly brackets then you have to do return index !== activeCard; So that's why in short we can directly write index !== activeCard without curly brackets.

[@HarshaVardhan-fu9kv]

You can use return (index!=activeCard);

[@bede114]

Hey man, is there any way to make the opacity of the dragging component 100% , I'm trying it still not getting full opacity!!

[@CodeBlessYou]

I think no. We can't get full opacity

[@Andi0391]

conditiooooon | aaaaand teeekalook

[@CodeBlessYou]

😅😅😅

[@coppergold2916]

I followed your code and couldn't get drag to work on an empty column. (aka drag to an empty column)

[@CodeBlessYou]

Check where you are getting drop here area in your empty column. And style according to that❤❤❤

[@krishparmar7917]

did you fix this issue? if yes then how!!

[@krishparmar7917]

@@CodeBlessYou i did not get it. can you explain how can we do that?

[@CodeBlessYou]

@@krishparmar7917 You have to drag that box to the very top of the empty column. Then it works

[@krishparmar7917]

@@CodeBlessYou now it is working 🎉

[@user-Amankhowal]

add "Feature" in your title

[@CodeBlessYou]

❤❤❤