How To Build Sortable Drag & Drop With Vanilla Javascript

🚨 IMPORTANT:
1 Year Free Hosting: www.atlantic.net/webdevsimpli...
Use code KYLE for an additional $50
Drag and drop is something that nearly every web application needs, but it can be tricky to build from scratch. That is why in this video I will be showing you exactly how to build a sortable drag and drop list with very little JavaScript.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/D...
CodePen Code: codepen.io/WebDevSimplified/p...
Reduce Tutorial: • 8 Must Know JavaScript...
🧠 Concepts Covered:
- HTML drag and drop attributes
- JavaScript drag and drop events
- JavaScript reduce function
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#DragAndDrop #WDS #JavaScript

[@vaibhavyadav8726]

In the end Kyle said, and that's all there is to creating this "SIMPLE"...

[@johnbritolima]

LOL

[@JohnWickXD]

Haha

[@cjaym5671]

I've learned so much more from your tutorials. I would recommend for someone like me that is learning Javascript. I've been thru so many tutorials in the last few months but it makes more sense when I watch your videos. Thanks!!!

[@basroos_snafu]

Man, your videos are so inspiring. My server side is still classic ASP and I should upgrade to some new language, but your client-side applications are still usable in my situation, and I will definitely implement some of the solutions you provide. I've always managed to solve problems by just using Google and find what's available on the web, but what you teach is complete and solid. Thank you so much for all the effort, although I know it's fun to make. Keep up the good work!

[@moominjuice2]

Beautifully explained and a far more versatile, functional and more succinct code than some of the other tutorials out there. Excellent stuff. Glad I found this channel and really grateful for you sharing on Git.👍

[@Yousifalzoubi]

Amazingly simplified explanation! Your channel is now officially my number one go-to for vanilla JavaScript tutorials.

[@rostyslav5334]

That's the thing I was requesting long long time ago, thank You, good job!

[@LawnCrack]

I don't think I've ever commented on your channel Kyle. Just wanted to say, YOU ARE THE MAN! Love your content. It's all over my head. Exactly what I need!

[@donaldbradbury1100]

Thanks for this tutorial. I watched another that also used other events and now I will have to see why the differences. When I incorporate this in my electron/node project, then I will have learned. Thank you so much.

[@mouseclicker4955]

The math was a little difficult for me to understand at first, so I changed the formula a little. Since the y-position increases as you drag the mouse down, I set the offset = y - (box.top + box.height / 2). Since the top of the box's y-coordinate is given to us, all we need to do is add half of the box's height to it and it finds the middle for us. I understand most people might have understood the original equation, but I just wanted to add this here in case anyone was confused.

[@user-lc8yw4mk6l]

the formula is eventually the same, but your explanation is more intuitive. Thanks a lot!

[@RobertFletcherOBE]

That's because it's needlessly complicated for such a simple problem. just get the element your hovering over using document.elementFromPoint(e.clientX, e.clientY) then check if your mouse is in the upper or lower half of the elements rect. Its the only part of an otherwise good tutorial that just seemed to be there for the sake of looking fancy

[@AndrewTSq]

@@RobertFletcherOBE I've been doing HTML for 2 years, and its first time I hear about this function :D This makes lots of thing way easier. Thanks!.

[@AndrewTSq]

@@RobertFletcherOBE i have tried this now, but the problem is when you drag an element and your poinyer is between 2 elements, then it defaults to last in the list, until you go over an element. So it looks kind of bad

[@keremardcl6759]

@@AndrewTSq this is not HTML though :)

[@sebby007]

Now that is a high quality, no nonsense video! I thought vanilla JS was just a pain but you presented this incredibly well and made is simple to follow! Love it.

[@imraff]

Really amazingly well explained and easy to follow, will definitely be using this in a project at work soon and i was DAUNTING it, thinking it would be super complex/rely on a framework I'm not familiar with but you really broke it down super easily. Can't wait to play with and maybe add x coord too! Thanks again.

[@YinPT]

You explain things in a simple and clear way. Thank you!

[@flyinoctopus]

Outstanding tutorial as always, Kyle. I don't know what I'd do without you!

[@maskman4821]

This is the tutorial I've been waiting for, this is apparently the best drag-and-drop vanilla js tutorial for sure. I have learned a lot. for people who don't want to go deep on technical part, there are a few libraries that simplify the work. But understand how drag and drop works under the hood make developing work more flexible and free. But for people who just want to quickly get started and apply drag-and-drop into their projects then 3rd-party libraries do the work. Anyhow, thank you Mr. Kyle Cook for this tutorial, you seem to know what everybody needs and wants, impressive, amazing and awesome !!!

[@vinisha7796]

what libaries can you use for drag and drop?

[@ondrejexner3688]

This was just awesome. Great work Kyle!

[@GabrielCrowe]

This tutorial was wonderful, please keep making these.

[@beinyourguard]

you are a very smart programmer, i hope to be like you someday

[@sanghvian]

Amazing tutorial. Like always, learned a lot. Thanks a lot Kyle !

[@mykalimba]

Such a cool effect and you make it look easy!

[@OnlineTutorialsYT]

Nice...I need something like this for my next video.....Thanks bro... your videos are really awesome...Keep it up

[@dev10shah]

Wow , Best tutorial teacher

[@codingwithkenny6492]

@Online Tutorials

[@jansanchez]

Nice tutorials you're doing

[@kenkioqqo]

Hey Online Tutorials, were you able to make a video tutorial with what you've learned here? As a beginner, I would love to see how other creators are teaching this concept from their own perspectives...

[@The-Dev-Ninja]

@@codingwithkenny6492 hi kenny!

[@abrar8133]

I'm not exaggerating but you have the best channel! I watched so many javascript videos but most of them don't go into clear details just like you do.. THANK YOU

[@ahlbf7]

I`ve put some of my time on C# for the backend, and now I`m strugling with the front-end. Thanks for the video.

[@SOUVIK_RAY_]

This is an awesome tutorial. You have explained really well. It was very easy to implement it in my code with a slight variation.

[@aoisonne1461]

Been trying to set up drag and drop in my angular app. Using the offset for determining placement was exactly the hint I was looking for, thanks.

[@nclsDesign]

This got randomly recommended to me and I need exactly this later for my current project. Perfect!

[@xKond3i]

This man knows, what he's doing. Love those explaining videos. Thanks! 😎

[@jdholwick]

This video really helped me out with a feature I was trying to add to a senior CS university project, so thank you very much!

[@troyjenkins7189]

Great video, man! Really loved it!

[@mikerainey4144]

Brilliant, just what I needed. Your explanation and examples were clear and easy to understand. I didn't just learn what code to copy, learned how and why it works. Thank you.

[@akhmedbejli8657]

I was currently working on my own version of trello and this is a great help. Thank you so much. Everyone salute for him!

[@meerule]

what happened to ur trello project? still working or dropped?

[@akhmedbejli8657]

@@meerule I lost motivation. I also gotta do a lot besides this one. So I hope I will make this someday

[@mala235813]

Perfect tutorial. Big thanks! Just what I needed.

[@MrJoey5]

Damn brother, the way you verbalize as you go, even though you're watching on second screen a finished product, is still amazing.

[@anthonylewis3789]

Love your work, I can honestly say I learn a lot from you

[@abhijeetsingh1387]

Thank you for this one! This is a really useful tool!

[@mdzafrullahsarafat1409]

Great tutorial. I Always learn new things when I watch your tutorial.

[@hellelo.5840]

My favorite moment in this video is 15:42 .........Man that was very straight no stop...............................Great Content.

[@authenticnaturalnoises]

Thanks man. You really create awesome content !!!

[@edenmaimon6983]

Thank you! It was very complicated for me, but you explained it excellently! Starting to follow your channel.

[@brian1801]

Quite simply -- YOU ROCK! Great content. Even better presentation. Thanks for making such an awesome video.

[@dimitrispolitis9393]

We can also listen for drag events globally with event delegation since the only thing that can move around is the tags. document.addEventListener('dragstart', (e) => { e.target.classList.add('dragging'); }) document.addEventListener('dragend', (e) => { e.target.classList.remove('dragging'); })

[@Fooljuice]

This was really helpful. Thanks Kyle.

[@ohad7]

Brilliant video man !! Thank you for sharing

[@mutaherraza9635]

Awesome explanation. Exactly what I wanted to learn. Thanks a lot!

[@user-oh5uh4vq4r]

Thank you so much! I've been trying to get my drag and drop to work for hours and this video showed me how.

[@almadev183]

Thank you so much... Very useful, I applied an addapted version to my project. Very well explained, definitely I will watch more of your videos.

[@Opyext]

wow!!! your explanation is incredible, i have learnt a lot ,thanks

[@macieq44]

Such a great video! Thank you!!

[@rshum85]

This helped out with my project, thanks so much!

[@LucasGoulart]

Man, thats 22 minutes just salved my life! Thank you so much!

[@theresacampbell9084]

Your job truly is simplifying the web 👌🏾

[@life8261]

Great! This helps me so much with my study. You do a wonderful job! :)

[@milanradinovic6770]

Thank you so much for this tutorials. I have learned so much from you. You gave me the inspiration to learn web development.

[@maskman4821]

me too !!!

[@LOLmomentsandfails]

Your videos helped me become a great developer, without going to school. I wanted to ask if you could do some more web security videos! Thank you!

[@emmanuelumana7491]

Amazing man! thanks for sharing!

[@budkin]

Fantastic explanation. Subbed.

[@hudstone4732]

im in internship and you just saved my life. You are a true hero

[@omarbaldit1]

Excellent explanation. Thanks!

[@keremardcl6759]

holy moly this is a perfect tutorial. Now I need to figure out how to post the index of each element so as to change their priority level in my DB :)

[@Adrian-aTak.19]

i think you can make a column in the db that specify the priority level

[@user-cd2ls5rk9l]

Super helpful. Man, you are awesome, I will watch other videos for sure

[@zylascope]

Thanks. That's awesome. A bit complicated for me but I'll get there. A very well explained tutorial.

[@Spirit529]

you saved my life brother, great content!

[@Yoghaaa]

Thank you, Kyle for the video.

[@DIEZ919191]

Wow! Just amazing tutorial!!!

[@siarheilabetsik5658]

Very good! Thanks for this video.

[@orashusedmund7675]

thank you Kyle, great video, helped me finish a task. 😇

[@HandcartRule46]

Just what I was looking for. Great tutorial

[@KeskilChnProgram]

Did you try it, has it succeeded?

[@m.sulemankhan3992]

Thanks very simple explanation you saved my day

[@Azertuiopnbvcxwmlkjh]

Great content. I'm subscribing!

[@Snoo29293]

I had to watch it twice but I finally understood it.

[@kaydrum9377]

I really like your videos!!👍

[@lionelshaghlil1754]

That was professional. Very well and clearly explained, Thank you indeed ,

[@ducdao7607]

15:48 that was hilarious how you pulled that come back

[@aarondz789]

I love your content.Thanks!

[@PankajVerma-zj4vr]

You just saved my life ! thanks bro

[@nicholasdittmer4494]

Brilliant mate! Thank you very much! Clever stuff. Better than the React libraries I tried and a real feather in the cap for my projects moving forward. Thank You

[@didierjoomun]

Great tutorial, thanks

[@mohammedmahmoud1046]

Awesome tutorial, you are so smart . Thank you

[@vishalanthony1529]

Helped me alot in my To-do app.

[@panagiotiskoligas9631]

Kyle you are completely blowing our minds....

[@md.hasanmahmud1390]

Very Helpful bro 🙂

[@bythealphabet]

Good explanation thank you

[@ratiabulashvili6491]

Brooo, You are the best and Beast at the same time

[@andresvillanueva9362]

Thx so much, u help me a lot!

[@mangelozzi]

Really nice video. Allowed me to implement drag/drop in my situation in 15mins. I optimized it by caching the element being dragged and draggables at dragstart so they are not recalculated every dragover event (which happens a lot). I also get the draggables with querySelectorAll('[draggable="true"]) instead of a new class.

[@tanyixuan4639]

woah， thanks a lot. This video is easy to use.

[@redpie907]

I like your videos very usefull i love them it makes me try it :D and enjoy programming thank you

[@nove1398]

THanks,. I was able to build on this as a base

[@kriskuiper4647]

In one word, awesome

[@nameLastname786]

Thank you !

[@olafkliemt1145]

nice one - thanks !

[@frankkj1995]

Amazing tutorial, learnt loads about reduce after confusingly working out ever bit of code. Just a note, if you use the insertbefore function you don't have to check if the element is null, as it will automatically append to the end of the parent container if the element is null. Great video though! Thanks.

[@usr747]

In this code getDragAfterElement() returns undefined instead of null, so I don't think this code is strictly correct. Because insertBefore() must pass Node or null. > Node.insertBefore() - Web APIs | MDN > developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore > Note: referenceNode is not an optional parameter. You must explicitly pass a Node or null. Failing to provide it or passing invalid values may behave differently in different browser versions. This code is comparing afterElement == null instead of afterElement === null, so it just happens to work correctly. If you want to uncheck whether the element is null, the argument to reduce () should be {offset: Number.NEGATIVE_INFINITY, element: null}.

[@pranjalsingh2207]

Awesome tutorial. I wanted to know how to extend this to 2d layout of draggables where we can't just use y coordinate

[@nikhil6842]

great tutorial

[@cyphi1]

I have an idea...don't think it'll be simple, but it should be doable with your help!! thanks for the video!!

[@WeryZebra]

Thanksss great tutorial

[@virgilngalaham5419]

Thank a lot, good job

[@marimuthur9456]

your really incredible awesome thank you so much👌🏼👌🏼👌🏼👌🏼😊

[@mr.c7411]

Best drag and drop video

[@romuloalves9349]

Ótimo vídeo parabéns 👍.

[@Hoobizone]

Thanks bro!