!!QUICK NOTE!! If anyone is having issues on mobile, try adding ontouch events along with your ondrag events! According to caniuse, the drag API SHOULD be supported on all modern browser's, but after a bit of googling it looks like some devices won't listen for drag. Touch events should work though! I've been unable to replicate as this works as expected on all devices I have access to, so if this solution works for anyone, please let me know so that I can update the source code 😂😂
For any juniors - pay attention to his mental approach when going through this exercise. The order, code layout, how functions are introduced, is the most valuable thing in this video.
This is simply brilliant. The way you used data-attributes, and storing the ID on the event itself! I learnt a ton from this tutorial. Thank you very much.
The way you provide each part of the components, drag events and the use custom html attributes (data-attributes) is awesome! Your approach to implement this feature is awesome and I learned a lot. Thanks for sharing this. Keep it up! 😊💫💫
For things like this, it might be better to use react context to provide the methods for setting cards and reading cards associated with each column. It does couple your components to context though, but I'd imagine its a lot more efficient. If you store a hashmap in the context, using column IDs as keys, and storing the associated cards in an array, you'd be able to instantly look up all card associated with that column. Instead of doing linear search on all cards for every column. That method would require a bit of boilerplate and probably not the best content, maybe even overkill for a non performance intensive app like a todolist.
this was really easy to understand and follow along video! But I'm having a hard time understanding how your handleDragEndFunction knows what column the card is being dropped into if you never passed it?
They’re typed out explicitly higher up in the file, you are correct in a sense though, if you tried to do something like ‘text-${color}-500’ it would not work
I like how you present the building process by not typing everything, this vid will easily become a 5 hours course in some other channel. Thank you for saving our time.
The result is solid but it gives me ticks that you instantiate variables descending order. E.g. when you start building the kanban and you have “Board” and “Column” AFTER the Kanban, but still use them inside. That should be illegal 😅
Your code is readable and I can follow the video very well. I haven’t done much with React, but all those functions returning JSX returning functions make me a bit nervous … about React. Does code like this GC alright? Typescript’s type system would help React out quite a bit.
One thing I’ll note is that I would generally never have all of these functions in the same file, it’s just easier to follow (and record) in a video. TypeScript ABSOLUTELY helps, I never work without it, but I recognize some haven’t learned it yet so I generally make videos without it just so it’s easier for beginners to follow
It would be really helpful if you make another video about improving the accessibility of this, or at least show how migrating it to something like shadcn would improve accessibility I suppose
Drag leave is triggered on the column when dragging cards over child elements of the column... anyone else experiencing this? Its causing the column background color to flicker when hover over other cards.
That is the next project in my queue and after that in my resume also you are just amazing bro what an easy tutorial you have created for such an advanced project(KANBAN BOARD) 🔥🔥 Also please let me know which VSCode theme you are using that looks very cool!
There is one bug. How to reproduce? 1. Add a new card. 2. Again Add a new card without typing anything. It will take title from older state. As you forgot to clear the state on submit.
Would this also work on touch devices? As far I know you can't pass data using dataTransfer on touch devices. Please let me know if it is possible. Nice vid 👍
@@megamind452 Hmm, try adding onTouch events as well as the onDrag events (named similarly, so onTouchStart etc). I was under the impression you didn't need to do this, but Googling around a bit, looks like that could be an issue for some devices. If not, I'd try googling for issues with whatever browser you're using. caniuse shows support for pretty much every modern browser outside of firefox for android heh.
It is a nice and clear tutorial, could you please help me to create a nesting drag and drop, where items may have sub items and subitems can be drag and drop inside an item along with it's parent
Your components are incredible I checked your website, and it's generous with a lot of free components! So talented! Design and being creative is my biggest issue as software engineer, like when I see a design or an animation I can replicate it without looking at the code most of the time (not all of them, you have some intriguing and difficult animations) but come up with the design or animation it's nearly impossible I find that task so difficult 😅
!!QUICK NOTE!!
If anyone is having issues on mobile, try adding ontouch events along with your ondrag events! According to caniuse, the drag API SHOULD be supported on all modern browser's, but after a bit of googling it looks like some devices won't listen for drag. Touch events should work though!
I've been unable to replicate as this works as expected on all devices I have access to, so if this solution works for anyone, please let me know so that I can update the source code 😂😂
For any juniors - pay attention to his mental approach when going through this exercise. The order, code layout, how functions are introduced, is the most valuable thing in this video.
This is simply brilliant. The way you used data-attributes, and storing the ID on the event itself! I learnt a ton from this tutorial. Thank you very much.
Thank you so much! :)
The way you provide each part of the components, drag events and the use custom html attributes (data-attributes) is awesome! Your approach to implement this feature is awesome and I learned a lot. Thanks for sharing this. Keep it up! 😊💫💫
You should change the channel name to Tom Is Cooking. Thank you for making this!
😂😂😂
For things like this, it might be better to use react context to provide the methods for setting cards and reading cards associated with each column.
It does couple your components to context though, but I'd imagine its a lot more efficient. If you store a hashmap in the context, using column IDs as keys, and storing the associated cards in an array, you'd be able to instantly look up all card associated with that column. Instead of doing linear search on all cards for every column.
That method would require a bit of boilerplate and probably not the best content, maybe even overkill for a non performance intensive app like a todolist.
I agree, react context feels better here
this is awesome really appreciated for these tutorials looking forward for more.
Damn this is gold here guys!
Tom is loading ❌ legend ✅. Thanks for this absolutely simple explanation.
This tutorial is worth moneyy
Thank you!! Took a while longer than most of my videos, hoping people find it more useful 😂
Amazing!
Great content, keep the good work up
this was really easy to understand and follow along video! But I'm having a hard time understanding how your handleDragEndFunction knows what column the card is being dropped into if you never passed it?
Dude, you're amazing
Awesome!!!
Awesome content 🎉
2:33, how can you accept ${headingColor} prop as a Tailwind class?
Shouldn't tailwind classes be typed out explicitly for them to properly compile?
They’re typed out explicitly higher up in the file, you are correct in a sense though, if you tried to do something like ‘text-${color}-500’ it would not work
@@tomisloading Thanks for a quick reply
No shadcn - Here take your like
I like how you present the building process by not typing everything, this vid will easily become a 5 hours course in some other channel. Thank you for saving our time.
The result is solid but it gives me ticks that you instantiate variables descending order. E.g. when you start building the kanban and you have “Board” and “Column” AFTER the Kanban, but still use them inside. That should be illegal 😅
LOL well I mean I’d generally have them in their own files, just easier to do it in one for a video 😂😂
Your code is readable and I can follow the video very well.
I haven’t done much with React, but all those functions returning JSX returning functions make me a bit nervous … about React. Does code like this GC alright?
Typescript’s type system would help React out quite a bit.
One thing I’ll note is that I would generally never have all of these functions in the same file, it’s just easier to follow (and record) in a video.
TypeScript ABSOLUTELY helps, I never work without it, but I recognize some haven’t learned it yet so I generally make videos without it just so it’s easier for beginners to follow
y does the opacity of the div decreases when i am dragging it
css is not loading so what should i do,also i have npm install react framer-motion react-icons in my react app please help!!
I wish I had known about this sooner
Why didn't you use framer motion reorder?
I find it to be a bit buggy
@@tomisloading thank you for reply, I always learn from your work
Bro please make a video on your website how you create it and can we create it using on react
Noice bro keep it up
It would be really helpful if you make another video about improving the accessibility of this, or at least show how migrating it to something like shadcn would improve accessibility I suppose
is there ways to impliment your components in WordPress?
Drag leave is triggered on the column when dragging cards over child elements of the column... anyone else experiencing this? Its causing the column background color to flicker when hover over other cards.
That is the next project in my queue and after that in my resume also you are just amazing bro what an easy tutorial you have created for such an advanced project(KANBAN BOARD) 🔥🔥
Also please let me know which VSCode theme you are using that looks very cool!
Thank you!! Happy to help! :) and my theme is called Andromeda 😁
@@tomisloading Thank you
There is one bug.
How to reproduce?
1. Add a new card.
2. Again Add a new card without typing anything. It will take title from older state. As you forgot to clear the state on submit.
Good callout!
Thank u!!
Happy to help!
Would this also work on touch devices? As far I know you can't pass data using dataTransfer on touch devices. Please let me know if it is possible. Nice vid 👍
Yes, it should work the same! Possible there’s edge cases I’m unaware of but I can say that the demo in this video works as expected :)
@@tomisloading it's not working, I tried on your website using my phone. Is there any way to make it work.would really appreciate that.
@@megamind452 Hmm, try adding onTouch events as well as the onDrag events (named similarly, so onTouchStart etc). I was under the impression you didn't need to do this, but Googling around a bit, looks like that could be an issue for some devices.
If not, I'd try googling for issues with whatever browser you're using. caniuse shows support for pretty much every modern browser outside of firefox for android heh.
It is a nice and clear tutorial, could you please help me to create a nesting drag and drop, where items may have sub items and subitems can be drag and drop inside an item along with it's parent
Any tutorials on Gsap ?
Haven’t done any yet, but definitely will in the future!
Great
wow
OMG!!!!! That's amazing 🤩
Thank you!! 😁
Your components are incredible I checked your website, and it's generous with a lot of free components! So talented!
Design and being creative is my biggest issue as software engineer, like when I see a design or an animation I can replicate it without looking at the code most of the time (not all of them, you have some intriguing and difficult animations) but come up with the design or animation it's nearly impossible I find that task so difficult 😅
Thank you for the kind words!! 🙂
This is not working well for phone devices its going out of the page 😊 do have a look at it thanks for the tutorial
im so far from it, even tho coding for two years...
Awesome !