Multiple List Drag and Drop in React [Easiest Way]
HTML-код
- Опубликовано: 9 фев 2025
- 🎓Get free access to my upcoming Ultimate Node.js Course for the first 100 students: forms.gle/8m9X... 🚀
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/...
💌Join my FREE Email News Letter for updates: codeblessyou.c...
Resources for this Application - drive.google.c...
🤩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.epidemic...
Copyright
Arrow - www.flaticon.c...
Grab - iconduck.com/i...
Social Media Links
🚀COURSES : www.udemy.com/...
💌News Letter : codeblessyou.c...
🤩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
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
💙Register for FREE Git and Github Course - forms.gle/U4cnzMX1EkWPHdX89
Excellent! neat and clean. No unnecessary complex info. Just enough and perfect to the point. Many thanks. 👍👍
❤❤❤
This is a gem. I was not expecting it to be this good.
Thank you so much❤❤❤
Thanks. I can finish my feature by watching your clip. :D I hope to see more of your great lessons.
Sure❤❤❤
Beautifully explained ❤ Will surely use this in my future projects 🙌🏻
Glad to hear that. Thank you so much❤❤❤
This was Gold❤
Thank you so much❤❤❤
Thank you so much for this !!! good teach, good explain, good video 😇🙏
❤❤❤
Perfect! no, just great! Thank you!
Thank you so much❤❤❤
Great job!
❤❤❤q
anyone know a program like the one he is making that is on the market?
I want to organize my tasks in order of importance and having multiple lists side by side with the ability to drag and drop the items between them seems rather useful in this situation.
Best explanation
Thank you so much❤❤❤
you saved my life
❤❤❤
Superb on point!
❤❤❤
Ima use this
❤❤❤
Excellent . thanks a lot
Thanks for watching😀❤❤
Nice, which tool do you use for creating presentations?
It is not presentation, It is animation of After Effects (Adobe)
Just smooth. Amazong.
Thank you so much❤❤❤
Can I use this for react-native?
@CodeBlessYou Thank you for this amazing tutorial. I have encountered a bug in this application. Suppose I dragged all the tasks in any of the sections. Lets say I dragged all the tasks into doing section. Now at this point I cannot drag the tasks into another section. In short when the section is empty we cannot drop the task to that section. I hope you would address this and help solve this bug asap. Thanks a lot
You can drop task into empty column. But it is on the very top. If you slowly drag your card, you will get that. You can put condition to make it bigger.
@@CodeBlessYou thanks a lot
very good video thank you very much!
❤❤❤
Bro You explanation clearly and good
Thank you so much. Glad to hear that❤❤❤
I thought drag on drop feature is only possible with the library. Thank you for the good content.
❤❤❤
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
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.
You can use return (index!=activeCard);
yeah, had the same issue
you helped me, thanks !
Do you have a usereducer version?
No this is basic project
I followed your code and couldn't get drag to work on an empty column. (aka drag to an empty column)
Check where you are getting drop here area in your empty column. And style according to that❤❤❤
did you fix this issue? if yes then how!!
@@CodeBlessYou i did not get it. can you explain how can we do that?
@@krishparmar7917 You have to drag that box to the very top of the empty column. Then it works
@@CodeBlessYou now it is working 🎉
as always a great job! how to implement drag and drop for mobiles?
You can use library for that
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
These are two different topics. If you want to call api after dropping the card then call the api in that dropped function :)
nice tutorial, waiting new videos
❤❤❤
Hey man, is there any way to make the opacity of the dragging component 100% , I'm trying it still not getting full opacity!!
I think no. We can't get full opacity
How can it be nested?
I don't understand your question. Can you explain that?
conditiooooon | aaaaand teeekalook
😅😅😅
add "Feature" in your title
❤❤❤
import React, { useState } from "react";
const DropArea = () => {
const [showDropArea, setShowDropArea] = useState(false);
return (
setShowDropArea(true)}
onDragLeave={() => setShowDropArea(false)}
>
);
};
export default DropArea;
onDragEnter is not capturing
check it's CSS is working or not. Because name is different drop_area and hide_drop.
i already submit the form.. please send me the source code ! im begging you, or i will get fired !
It is already available in the Resources folder. Here or on my Udemy Course.