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

[@JohnWick-hp8wn]

Haha

[@beinyourguard]

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

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

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

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

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

[@rostyslav5334]

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

[@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'); })

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

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

[@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?

[@YinPT]

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

[@ondrejexner3688]

This was just awesome. Great work Kyle!

[@flyinoctopus]

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

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

[@nclsDesign]

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

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

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

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

[@xKond3i]

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

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

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

[@MrJoey5]

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

[@GabrielCrowe]

This tutorial was wonderful, please keep making these.

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

[@rshum85]

This helped out with my project, thanks so much!

[@sanghvian]

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

[@edenmaimon6983]

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

[@mala235813]

Perfect tutorial. Big thanks! Just what I needed.

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

[@LucasGoulart]

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

[@anthonylewis3789]

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

[@mutaherraza9635]

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

[@theresacampbell9084]

Your job truly is simplifying the web 👌🏾

[@mdzafrullahsarafat1409]

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

[@brian1801]

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

[@orashusedmund7675]

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

[@hudstone4732]

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

[@ohad7]

Brilliant video man !! Thank you for sharing

[@hellelo.5840]

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

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

[@troyjenkins7189]

Great video, man! Really loved it!

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

[@lionelshaghlil1754]

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

[@macieq44]

Such a great video! Thank you!!

[@life8261]

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

[@Fooljuice]

This was really helpful. Thanks Kyle.

[@Opyext]

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

[@user-cd2ls5rk9l]

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

[@Yoghaaa]

Thank you, Kyle for the video.

[@abhijeetsingh1387]

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

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

[@authenticnaturalnoises]

Thanks man. You really create awesome content !!!

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

[@zylascope]

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

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

[@Traussio]

you saved my life brother, great content!

[@m.sulemankhan3992]

Thanks very simple explanation you saved my day

[@Snoo29293]

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

[@HandcartRule46]

Just what I was looking for. Great tutorial

[@KeskilChnProgram]

Did you try it, has it succeeded?

[@panagiotiskoligas9631]

Kyle you are completely blowing our minds....

[@omarbaldit1]

Excellent explanation. Thanks!

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

[@emmanuelumana7491]

Amazing man! thanks for sharing!

[@vishalanthony1529]

Helped me alot in my To-do app.

[@ducdao7607]

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

[@PankajVerma-zj4vr]

You just saved my life ! thanks bro

[@siarheilabetsik5658]

Very good! Thanks for this video.

[@budkin]

Fantastic explanation. Subbed.

[@mohammedmahmoud1046]

Awesome tutorial, you are so smart . Thank you

[@aarondz789]

I love your content.Thanks!

[@DIEZ919191]

Wow! Just amazing tutorial!!!

[@kaydrum9377]

I really like your videos!!👍

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

[@ratiabulashvili6491]

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

[@Azertuiopnbvcxwmlkjh]

Great content. I'm subscribing!

[@didierjoomun]

Great tutorial, thanks

[@md.hasanmahmud1390]

Very Helpful bro 🙂

[@izyo8146]

I think the main key of your videos is that you don't make a whole pretty and solid toturial to be copy pasted from, I literally wanted to learn that API's basics and that exactly what I got with a little be more tips like getting the rect info with that clientBounding function I'm going library-less approach on all of my personal projects as much as possible and wanted to implement this with my own react custom hook for my needs. Much thanks!!!

[@nove1398]

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

[@tanyixuan4639]

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

[@bythealphabet]

Good explanation thank you

[@syedsmith2151]

Magic of drag and drop revealed with simple steps

[@cyphi1]

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

[@kriskuiper4647]

In one word, awesome

[@BukkyOdunsi]

This is the only tutorial of yours that i find hard for me

[@mr.c7411]

Best drag and drop video

[@redpie907]

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

[@pranjalsingh2207]

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

[@andresvillanueva9362]

Thx so much, u help me a lot!

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

[@laviral5311]

Don't know if someone already wrote it but be careful with "drop" event. You will need to prevent default in "dragover" event at least or also in "dragenter". Read some articles about problems of drag api in html 5 Also thank for a video, very accessible narrative

[@toonice555]

Wow due you figured this out on your own? I wouldn't even know where to start!

[@Russ_Paul]

First off great tutorial. I like your use of reduce. My brains are getting old and like others, I struggled a bit with the maths. Drawing it out, I came up with (box.top + box.height / 2) - y for my offset. If the current y point is above the midpoint it is a positive value, and below a negative value. Instead of reduce I used Array.find and a predicate of offset >= 0. This returns the first draggable with a mid point below the current y position. Easy coming up with this, when someone else has done all the hard work :)

[@Russ_Paul]

I used slightly different naming return draggables.find((draggable) => { const { top, height } = draggable.getBoundingClientRect() const middle = top + height / 2 const offset = middle - currentY return offset >= 0 })

[@marimuthur9456]

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

[@bolbittu]

I implemented a project with similar approach with JavaScript and .NET (in the back end to preserve div’s position). The only difference in my project was that I allowed the div to be placed anywhere on the screen.