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

  • @CodeBlessYou
    @CodeBlessYouАй бұрын

    💙Register for FREE Git and Github Course - forms.gle/U4cnzMX1EkWPHdX89

  • @wannabe_Akshat
    @wannabe_Akshat3 ай бұрын

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

  • @CodeBlessYou

    @CodeBlessYou

    3 ай бұрын

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

  • @SonRayS
    @SonRayS2 ай бұрын

    Perfect! no, just great! Thank you!

  • @CodeBlessYou

    @CodeBlessYou

    Ай бұрын

    Thank you so much❤❤❤

  • @luxia0024
    @luxia002421 күн бұрын

    Thank you so much for this !!! good teach, good explain, good video 😇🙏

  • @CodeBlessYou

    @CodeBlessYou

    20 күн бұрын

    ❤❤❤

  • @krishvadhani2840
    @krishvadhani2840Ай бұрын

    Superb on point!

  • @CodeBlessYou

    @CodeBlessYou

    Ай бұрын

    ❤❤❤

  • @allhailalona
    @allhailalonaАй бұрын

    very good video thank you very much!

  • @CodeBlessYou

    @CodeBlessYou

    Ай бұрын

    ❤❤❤

  • @dangetiharibabu886
    @dangetiharibabu8862 ай бұрын

    Bro You explanation clearly and good

  • @CodeBlessYou

    @CodeBlessYou

    2 ай бұрын

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

  • @pratikpattnaik3425
    @pratikpattnaik34253 ай бұрын

    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

    @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

    @HarshaVardhan-fu9kv

    2 ай бұрын

    You can use return (index!=activeCard);

  • @bimalgrg8951
    @bimalgrg895114 күн бұрын

    I thought drag on drop feature is only possible with the library. Thank you for the good content.

  • @CodeBlessYou

    @CodeBlessYou

    14 күн бұрын

    ❤❤❤

  • @bede114
    @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

    @CodeBlessYou

    Ай бұрын

    I think no. We can't get full opacity

  • @ewerpop
    @ewerpopАй бұрын

    nice tutorial, waiting new videos

  • @CodeBlessYou

    @CodeBlessYou

    Ай бұрын

    ❤❤❤

  • @Andi0391
    @Andi03912 ай бұрын

    conditiooooon | aaaaand teeekalook

  • @CodeBlessYou

    @CodeBlessYou

    2 ай бұрын

    😅😅😅

  • @deepmane5845
    @deepmane584520 күн бұрын

    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

    @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 :)

  • @coppergold2916
    @coppergold29162 ай бұрын

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

  • @CodeBlessYou

    @CodeBlessYou

    2 ай бұрын

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

  • @krishparmar7917

    @krishparmar7917

    Ай бұрын

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

  • @krishparmar7917

    @krishparmar7917

    Ай бұрын

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

  • @CodeBlessYou

    @CodeBlessYou

    Ай бұрын

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

  • @krishparmar7917

    @krishparmar7917

    Ай бұрын

    @@CodeBlessYou now it is working 🎉

  • @user-cw3qh2lx5y
    @user-cw3qh2lx5yАй бұрын

    as always a great job! how to implement drag and drop for mobiles?

  • @CodeBlessYou

    @CodeBlessYou

    Ай бұрын

    You can use library for that

  • @user-Amankhowal
    @user-Amankhowal2 ай бұрын

    add "Feature" in your title

  • @CodeBlessYou

    @CodeBlessYou

    2 ай бұрын

    ❤❤❤

  • @lalagisaa
    @lalagisaa22 күн бұрын

    i already submit the form.. please send me the source code ! im begging you, or i will get fired !

  • @CodeBlessYou

    @CodeBlessYou

    20 күн бұрын

    It is already available in the Resources folder. Here or on my Udemy Course.