Multiple List Drag and Drop in React [Easiest Way]
🎓Get free access to my upcoming Ultimate Node.js Course for the first 100 students: forms.gle/8m9XA7kmc17nHfhz8 🚀
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...
💌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
Пікірлер: 41
💙Register for FREE Git and Github Course - forms.gle/U4cnzMX1EkWPHdX89
Beautifully explained ❤ Will surely use this in my future projects 🙌🏻
@CodeBlessYou
3 ай бұрын
Glad to hear that. Thank you so much❤❤❤
Perfect! no, just great! Thank you!
@CodeBlessYou
Ай бұрын
Thank you so much❤❤❤
Thank you so much for this !!! good teach, good explain, good video 😇🙏
@CodeBlessYou
20 күн бұрын
❤❤❤
Superb on point!
@CodeBlessYou
Ай бұрын
❤❤❤
very good video thank you very much!
@CodeBlessYou
Ай бұрын
❤❤❤
Bro You explanation clearly and good
@CodeBlessYou
2 ай бұрын
Thank you so much. Glad to hear that❤❤❤
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
3 ай бұрын
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
2 ай бұрын
You can use return (index!=activeCard);
I thought drag on drop feature is only possible with the library. Thank you for the good content.
@CodeBlessYou
14 күн бұрын
❤❤❤
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
nice tutorial, waiting new videos
@CodeBlessYou
Ай бұрын
❤❤❤
conditiooooon | aaaaand teeekalook
@CodeBlessYou
2 ай бұрын
😅😅😅
can we implement below as well if yes then please make video or give some suggestion after drag and drop make api call save the changed data on server fetch it and show it ui using redux same again items are draged and droped in other compnent make api call save the changed data on server fetch it and show it ui using redux ..... goes on as per user decide
@CodeBlessYou
19 күн бұрын
These are two different topics. If you want to call api after dropping the card then call the api in that dropped function :)
I followed your code and couldn't get drag to work on an empty column. (aka drag to an empty column)
@CodeBlessYou
2 ай бұрын
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 🎉
as always a great job! how to implement drag and drop for mobiles?
@CodeBlessYou
Ай бұрын
You can use library for that
add "Feature" in your title
@CodeBlessYou
2 ай бұрын
❤❤❤
i already submit the form.. please send me the source code ! im begging you, or i will get fired !
@CodeBlessYou
20 күн бұрын
It is already available in the Resources folder. Here or on my Udemy Course.