Advanced Sortable Drag and Drop with React & TailwindCSS

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

[@tomisloading]

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

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]

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.

[@alvaroaquije2572]

Damn this is gold here guys!

[@justhrthings]

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

[@ruturajreddy1]

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

[@EnriqueDominguezProfile]

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]

Thank you so much! :)

[@Lifad2562]

Awesome !

[@iuliancarnaru954]

Great content, keep the good work up

[@ismael3s]

Dude, you're amazing

[@FreeCodeArena]

Awesome content 🎉

[@karthikraju6225]

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

[@tomisloading]

😂😂😂

[@zinter716]

This tutorial is worth moneyy

[@tomisloading]

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

[@Muhammed-nani964]

Noice bro keep it up

[@DanteMishima]

No shadcn - Here take your like

[@Dom-zy1qy]

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]

I agree, react context feels better here

[@sumonchandra5992]

OMG!!!!! That's amazing 🤩

[@tomisloading]

Thank you!! 😁

[@estebanmutis2386]

Thank u!!

[@tomisloading]

Happy to help!

[@duoctran9069]

I wish I had known about this sooner

[@Solo_playz]

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]

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

[@Solo_playz]

@@tomisloading Thank you

[@sahilverma_dev]

Great

[@freakinmonkey85]

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]

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

[@aghileslounis]

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]

Thank you for the kind words!! 🙂

[@yassinesafraoui]

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

[@user-qf5be9km6o]

would be awesome if nesting was covered too.

[@DavidConnerCodeaholic]

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]

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]

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

[@godofwar8262]

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

[@beodan9219]

wow

[@megamind452]

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]

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]

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

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

[@guptaashwanee]

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

[@CowMeCow]

is there ways to impliment your components in WordPress?

[@redcastle1745]

Why didn't you use framer motion reorder?

[@tomisloading]

I find it to be a bit buggy

[@redcastle1745]

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

[@Cypekeh]

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]

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]

@@tomisloading Thanks for a quick reply

[@SanthoshKumar-dev]

Any tutorials on Gsap ?

[@tomisloading]

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

[@PrinceKumarDhankhar-oc1gf]

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]

Good callout!

[@ndivij]

This is not working well for phone devices its going out of the page 😊 do have a look at it thanks for the tutorial

[@xczm225]

im so far from it, even tho coding for two years...

[@ifindev]

Awesome!!!