This React Drag and Drop Component Is Magic

[@developedbyed]

I’ll be gone for 2 days for my birthday trip, but when I’m back we will get back on the Typescript series and get ready to release the huge Next 14 course. Lots of love ❤️

[@developerpranav]

Happy Birthday Ed! ❤

[@developedbyed]

Thank you!

[@Kris1027_]

This course will be on KZbin?

[@OnlyJavascript]

Happy birthday 🎁🎂

[@yizain1891]

Happy Birthday Ed!

[@MrREALball]

‼‼For anyone watching, there are two GIANT problem with framer-motion reorder lists. Fist, they don't work well with scrollable lists. When you drag to the edge its doesn't auto scroll. Also, the items behave strangely while draggin on scrollable lists. Second, they don't support keyboard events. You have to implement those by yourself. Better solution would be to use dnd-kit. It isn't much more work. I gave the task of porting draggable lists from react-beautiful-dnd to dnd-kit to a junior dev and he did it in a few days. And the way I told him to setup a reusable context component makes it even simpler to use than the framer-motion one.

[@dylankuzmick3122]

Man u just saved my butt, thx!

[@nmeri2935]

Well, I tried using react dnd and it just keeps throwing overload errors and this worked just fine.

[@sarthakgupta072]

Thanks. Will try to use dnd-kit only then

[@jamesdenmark1396]

If Reorder.Item components are within a scrollable container, that container needs a layoutScroll prop so Framer Motion can correctly measure its scroll offset.

[@M1Marketing]

Been watching a lot of your videos, and I have to say, you are hands down the best React, Tailwind, and Next.js tutor on the internet right now! Your explanations are clear, practical, and easy to follow. I've been building my own full-stack apps thanks to your guidance, and I'm really considering buying your course soon. Keep up the amazing work, and thanks for all you do!

[@ChrisTOLAa]

Happy Birthday Funny Prog.😀

[@RicoKareem]

You posted this 5 days ago, and TODAY I have a story on my plate...for this feature. I love you and your timing so...much. Happy Birthday, mate.

[@ladokakhashvili8820]

Dude, absolutely love your energy. You have a face of a man that actually loves his job 💙 inspiring...

[@socialsales2181]

Magic is a scary word when it comes to development.

[@AbhiShake-pl3cf]

Exactly

[@AyomidePaulAsaniyan]

This was really helpful. Currently working on a project where I implemented something similar to this using dnd-kit. This feels more straightforward, I'm definitely trying this out. Thanks a lot Ed.

[@lamphrangmilamin2966]

You deserve a million sub man.. really love your teaching style.

[@stahlmandesign]

Great video. I've used DND packages for years and it's never been this clear and easy. I also like Framer more and more

[@asibe_cheta]

You’re the channel I’ve been looking for! 🎉 Happy birthday

[@ndnow12]

Is there any way to use this with shadcn datatable? I'm having trouble sending and using the set function in a child component.

[@kelvinochubili6762]

Thank you so much Ed! This was very very helpful.

[@wanwan-swagg]

Happy belated birthday!! I really appreciate this video!

[@kaushalmishra2286]

WHAT THEME YOU USE ON VSCODE ?

[@rossellacarmisano8280]

What extesion do you use in vs code per autocomplete and autoimport? 🙏

[@Raghunadh9]

Happy Birthday Man... and also, Happy 1 million subscribers in advance ...

[@ShubhamKute-qj8uv]

Hi Ed!! Can you please tell me which file upload library you have used in the above video and which one you will recommend? Awaiting your response...

[@zeeksthegoblin7564]

Happy bday! Enjoy ur trip!

[@blanxer]

happy birthday man, you are an inspiration, keep doing the good work 😊

[@denizorsel1029]

That is amazing. Thank you very much and happy birthday!

[@LazzyNerd]

Happy birthday bro 🎉 , can u make a video about your vscode setup including extensions

[@izsalqurlinas]

what the name this theme from your vscode? i love it.

[@karthM8]

Hi .The project you showed in this demo. Is it available as a course to buy?

[@gustavomartins3498]

Super fun and informative video. Happy birthday

[@amazekhashaa7309]

How to disable those many popups in vscode?

[@jorgeriveramorales]

Amazing!!, do you know if it also work for reorder items from a grid container?

[@codewithguillaume]

Very nice ed :D

[@MrSantirangel]

Hey Ed, do you see updating the fullstack course for Next.js 14?

[@vikingshadow4877]

Can u make a full course about framer motion plz?

[@genie_dev]

What's that wallpaper?

[@Real2Reel889]

Hey any own web page builder video available without any page builder use like dont use grapes js etc.?

[@DevMadeEasy]

Wow, Great Content, thanks for sharing it...

[@윤성조-l9d]

Happy Birthday~!🎂

[@RoomCorner_]

What extension you use for debug error interface?

[@wchorski]

please mention the libraries used in the video title or at least the description.

[@Muyiwamighty]

Happy birthday 🎉. Nice from framer motion

[@rog0079]

Happy birthday! be the same! hope everything goes great at your end! & lastly keep uploading these amazing videos!

[@anantgupta5806]

Happy Birthday Bro🥳🎉

[@omotehinseelvis9845]

Thank you

[@sardorkh3016]

Happy birthday my bro wish u all the best do more courses 🎉😁

[@MarcosLima-cs9cd]

hey happy birthday!! you are awesome

[@saadirfan2358]

Happy Birthday Ed .... Hope u had a great one.

[@LLCrypto]

Always love your content!!! Do you have a React course?

[@linuhusainnk]

possible in multidirectional

[@rea_kr]

프로그램을 하면서 즐거워하시는 모습이 흐뭇합니다.

[@stephanechaffre7451]

Happy birthday !!!

[@Ngocthach135able]

Can you share your VS Code settings and themes? They look really cool!

[@guy1061]

Happy birthday Champ 🎉

[@jsbr]

In my case framer-motion + useFieldArray + Two inputs and with like 5 elements is fine, but when I have 20 elements to drag, then it starts lagging so bad it is unbearable. Everything is re-rendered and I don''t know how to optimize it.... I was using dnd-kit and there wasn't problem with it at all

[@asmrjavascript_]

Hey how to small your windows 11 taskbar ???

[@krayziekray9509]

Hello Ed! What extension do you use for autocomplete in VScode?

[@ivan.jeremic]

Does it work for grids too?

[@yusufalaca-vl7hi]

Can you share the source code of the project?

[@sudoalex]

Hi Ed! Happy birthday!

[@ahmedsamir-m8s]

how much kb will framer motion effect my pkg? as i might only use it for this re-order ?

[@K조셉]

Happy birthday brother

[@mantas9827]

would have loved to see the code and play around with it (the add image dashboard)

[@mauricio1179]

Looks nice, buuuuuuut.... How is it for performance, updating the database for long Arrays.? I'm no expert, it's just a question.

[@simonhblanco]

Happy Birthday bro

[@georgemamy6283]

Thanks a lot ! But I want to know if it will change the position of items in the database or the API data ?

[@tamurtaj9389]

no for that you have to write down an API for that purpose, it will be achieved using priority approach, you will be setting the priority from high, medium and low, after every reorder (or however you want it to be) you will make a call to backend updating the priority and then you will be getting the list sorted by priority and updated at, it this way your list will be fetched back as the order you have saved

[@TheIpicon]

amazing video!

[@teeldinho471]

What theme and font?

[@daveydex]

Happy Birthday to you Ed.....

[@isabelphillips451]

I wish we had an equivalent for VUE ecosystem

[@tejasjani2544]

happy happy birthday man

[@CoryTheSimmons]

Is there something like this for Expo?

[@PritamTirpude23]

Happy Birthday Edward 🎁🎉

[@sinhang8493]

Nice. I 'd love it

[@SonAyoD]

does this work with expo

[@lianamikulin1281]

Happy belated birthday! 🎉

[@codestudio497]

niiice , last time i use drag and drop i did like 100 line of code including styles and stuff

[@tahedisoyad-x6x4]

Loved it!

[@ahmadpak]

Happy Birthday ❤

[@crosswalker45]

What a coincidence.. Today I was assigned similar task,, and you uploaded this video.

[@FirasMohamed96]

I love it thanks 😊

[@lsumail2189]

Where i can see the source code

[@mallickpriyanshu]

Happy Birthday ❤🎉

[@miggu]

I wish this library was fragmented as it's too big (has a lot of animation capabilities) to include just for reorder. Not great when performance is key.

[@miggu]

My bad , I just read through the documentation , they have a section dedicated to explain bundle size

[@enogratechnologies1896]

Happy birthday Ed.

[@Warpgatez]

I’m still in the shot 😂😂😂

[@juliannicholls]

Happy birthday. Mine's soon too.

[@johnalejandroquinterocasti203]

Thanksssss

[@FalconiZzare]

Does it work foor Horizontal drag and drop?

[@ivodelev9794]

Yes, but not both at the same time.They have example of horizontal in the docs

[@kristiankristian4652]

Happy Birthday buddy

[@ukaszzbrozek6470]

Framer motion is gold.

[@johnefan]

Happy Birthday 🎉

[@SahilPatil-y8h]

bro theme name pls

[@AhmadMaartmesrini]

Happy birthday 🎉❤

[@naylord5]

My man! You miss the NSFW tag here because this DnD is too sexy. Happy Birthday mate! Hope you're having a great time 🔥🎂

[@harishtanty5722]

Wish you a very happy and fun birthday 🎂 🎉

[@sankasanjeeva1182]

Happy birthday to my gorgeous teacher on the internet.

[@megamind452]

Happy birthday🎉

[@michealmltefive5510]

Motion Nice )

[@vickonsscope6477]

Happy birthday Silly😂

[@howto-eq8ce]

Hi dev how are you? 🎉

[@Ugojnr]

happy birthday

[@Zagoorland]

What vs code theme is this? Very nice :)

[@developedbyed]

Material theme palenight 😄

[@jorgemosqueda9409]

HB 🥳🎉

[@sourav010]

Happy birthday 🎉🎂, Yesterday was my birthday 🫣 1st March