JavaScript Drag & Drop Sortable List Project

Learn the drag & drop API, array methods, spread operator, and DOM manipulation in this vanilla JavaScript project

Full 20 Projects Course:

Code: [MONTHNAME]2021

Code:

TImestamps:
0:00 - Intro
2:27 - Insert List Items Into DOM
12:02 - Scramble List Items
18:44 - The CSS
31:07 - Drag & Drop Functionality
46:05 - Check Order

[TraversyMedia]

Yes, I know the order of people is not correct anymore 😅 This was made a while ago. Feel free to change the names/order

[jetzemeilink]

I just landed my first junior dev job today Brad! And your content has been a huge part of my learning. After I bought the javascript course I kept coming back to your videos and I still do. I thank you from the bottom of my heart and I hope you and your family are doing well.

[adnanalamofficial]

Amazed!!! I was just practicing exactly like this project yesterday and now its explanation is on YT!

Great work Sir Brad!!!

[Greg]

This is great, love how you step through things piece by piece. I always had to depend on a 3rd party script to do nested sortable items, but I love knowing the core base to do them myself.

[wOkeN]

This is by far the cleanest implementation of drag and drop I've ever seen 😍. Thanks for sharing this awesome technique, Brad🙂

[douglasfrb]

Really thanks for every tutorial you've been sharing with us! Every new content I either learn something new or review what I've learned. Your knowledge and skills about Front-end development are unique. Thanks again ;)

[thesyd]

thanks sir brad, I still follow your tutorials from the begin to the end , and i have real bad english you're just awesome

[saeedsaleh]

Elon Musk rn: Depression, Sadness, Loneliness

[clintonmbonu]

Thank you for this video! Saved me so many hours of trying to figure out how the drag and drop API works.

[brad]

Thanks Brad! Your easy to follow solution helped me out a ton for a project that I am working on right now

[Havii]

I really appreciate you sharing your knowledge and teaching skills with us

[YiannisChristodoulou]

Thank you, Brad.
You're awesome. Keep creating great stuff!

[bloodybritbastard]

Thank you for this, I've been tearing my hair out on some tutorials, this is the first one that worked for me!

[abdurahmanyusuf]

Sir I am first I am connected this youtube for years I am from somalia 🇸🇴 thanks brad

[jjbudinski]

Seeing classes that focus on the basics makes me happy, too many times there are multiple additional languages/systems that get slipped in right away which can be confusing.

[jyotiranjangiri]

Today I was thinking of drag and drop featured project. Thanks a lot.

[photoinshot]

Thanks for a very interesting, informative, and instructional video. As always, the code logic is very well explained.

[GameMasters]

Brad we love you man, you a hero for us

[xavelor]

This was just what I was looking for! Thank you for sharing this.

[anhqui]

Thanks for your videos. I have just purchased Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript course from Udemy. I will try to learn them all then come back to complete all your projects on YouTube.