Advanced Sortable Drag and Drop with React & TailwindCSS

Рет қаралды 36,518

Күн бұрын

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Today we're going to a build a Notion inspired drag and drop kanban board using React, TailwindCSS, and Framer Motion. We'll do this entirely from scratch, this way you can take these same skills and build other drag and drop experiences.
#javascript #reactjs #webdevelopment
📚 Video Links
Source code: www.hover.dev/components/boards
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
0:00 - Introduction
0:34 - Layout and style columns
3:37 - Layout and style cards
5:50 - Style drop indicators
7:20 - Layout and style delete section
8:46 - Setup form
11:24 - Deleting cards
13:09 - Add layout animations
14:11 - Column highlighting
15:01 - Highlight indicators
17:25 - Moving cards between columns
19:18 - Persisting cards on page refresh

Пікірлер: 62

@tomisloading 4 ай бұрын

!!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 😂😂

@FlintBits 4 ай бұрын

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.

@DanZ-fq2qs 21 күн бұрын

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.

@justhrthings 4 ай бұрын

this is awesome really appreciated for these tutorials looking forward for more.

@alvaroaquije2572 4 ай бұрын

Damn this is gold here guys!

@EnriqueDominguezProfile 3 ай бұрын

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.

@tomisloading 3 ай бұрын

Thank you so much! :)

@ruturajreddy1 4 ай бұрын

Tom is loading ❌ legend ✅. Thanks for this absolutely simple explanation.

@Lifad2562 11 күн бұрын

Awesome !

@iuliancarnaru954 4 ай бұрын

Great content, keep the good work up

@ismael3s 4 ай бұрын

Dude, you're amazing

@FreeCodeArena 4 ай бұрын

Awesome content 🎉

@karthikraju6225 3 ай бұрын

You should change the channel name to Tom Is Cooking. Thank you for making this!

@tomisloading 3 ай бұрын

😂😂😂

@Dom-zy1qy 4 ай бұрын

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.

@iukys3889 3 ай бұрын

I agree, react context feels better here

@Muhammed-nani964 4 ай бұрын

Noice bro keep it up

@zinter716 4 ай бұрын

This tutorial is worth moneyy

@tomisloading 4 ай бұрын

Thank you!! Took a while longer than most of my videos, hoping people find it more useful 😂

@duoctran9069 4 ай бұрын

I wish I had known about this sooner

@estebanmutis2386 4 ай бұрын

Thank u!!

@tomisloading 4 ай бұрын

Happy to help!

@sumonchandra5992 4 ай бұрын

OMG!!!!! That's amazing 🤩

@tomisloading 4 ай бұрын

Thank you!! 😁

@Solo_playz 4 ай бұрын

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!

@tomisloading 4 ай бұрын

Thank you!! Happy to help! :) and my theme is called Andromeda 😁

@Solo_playz 4 ай бұрын

@@tomisloading Thank you

@aghileslounis 4 ай бұрын

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 😅

@tomisloading 4 ай бұрын

Thank you for the kind words!! 🙂

@DanteMishima Ай бұрын

No shadcn - Here take your like

@sahilverma_dev 4 ай бұрын

Great

@freakinmonkey85 4 ай бұрын

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 😅

@tomisloading 4 ай бұрын

LOL well I mean I’d generally have them in their own files, just easier to do it in one for a video 😂😂

@DavidConnerCodeaholic 4 ай бұрын

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.

@tomisloading 4 ай бұрын

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

@vaibhavchauhan3741 4 ай бұрын

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!!

@yassinesafraoui 4 ай бұрын

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

@godofwar8262 4 ай бұрын

Bro please make a video on your website how you create it and can we create it using on react

@user-qf5be9km6o 4 ай бұрын

would be awesome if nesting was covered too.

@beodan9219 3 ай бұрын

wow

@megamind452 4 ай бұрын

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 👍

@tomisloading 4 ай бұрын

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

@megamind452 4 ай бұрын

@@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.

@tomisloading 4 ай бұрын

@@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.

@CowMeCow Ай бұрын

is there ways to impliment your components in WordPress?

@guptaashwanee 4 ай бұрын

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

@SanthoshKumar-dev 4 ай бұрын

Any tutorials on Gsap ?

@tomisloading 4 ай бұрын

Haven’t done any yet, but definitely will in the future!

@redcastle1745 3 ай бұрын

Why didn't you use framer motion reorder?

@tomisloading 3 ай бұрын

I find it to be a bit buggy

@redcastle1745 3 ай бұрын

@@tomisloading thank you for reply, I always learn from your work

@Cypekeh 3 ай бұрын

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?

@tomisloading 3 ай бұрын

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

@Cypekeh 3 ай бұрын

@@tomisloading Thanks for a quick reply

@PrinceKumarDhankhar-oc1gf 17 күн бұрын

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.

@tomisloading 17 күн бұрын

Good callout!