How To Build Sortable Drag & Drop With Vanilla Javascript
HTML-код
- Опубликовано: 16 мар 2020
- 🚨 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
In the end Kyle said, and that's all there is to creating this "SIMPLE"...
LOL
Haha
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!!!
you are a very smart programmer, i hope to be like you someday
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!
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.👍
Amazingly simplified explanation! Your channel is now officially my number one go-to for vanilla JavaScript tutorials.
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 !!!
what libaries can you use for drag and drop?
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.
the formula is eventually the same, but your explanation is more intuitive. Thanks a lot!
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
@@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!.
@@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
@@AndrewTSq this is not HTML though :)
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!
Nice...I need something like this for my next video.....Thanks bro...
your videos are really awesome...Keep it up
Wow , Best tutorial teacher
@Online Tutorials
Nice tutorials you're doing
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...
@@codingwithkenny6492 hi kenny!
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.
That's the thing I was requesting long long time ago, thank You, good job!
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.
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');
})
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.
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
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.
Outstanding tutorial as always, Kyle. I don't know what I'd do without you!
You explain things in a simple and clear way. Thank you!
This man knows, what he's doing.
Love those explaining videos.
Thanks! 😎
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.
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!
Damn brother, the way you verbalize as you go, even though you're watching on second screen a finished product, is still amazing.
This is an awesome tutorial. You have explained really well. It was very easy to implement it in my code with a slight variation.
Thank you so much! I've been trying to get my drag and drop to work for hours and this video showed me how.
This was just awesome. Great work Kyle!
Thank you! It was very complicated for me, but you explained it excellently!
Starting to follow your channel.
This got randomly recommended to me and I need exactly this later for my current project. Perfect!
This tutorial was wonderful, please keep making these.
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.
Man, thats 22 minutes just salved my life! Thank you so much!
Amazing tutorial. Like always, learned a lot. Thanks a lot Kyle !
Love your work, I can honestly say I learn a lot from you
Your job truly is simplifying the web 👌🏾
This helped out with my project, thanks so much!
Such a cool effect and you make it look easy!
Perfect tutorial. Big thanks! Just what I needed.
Great tutorial. I Always learn new things when I watch your tutorial.
im in internship and you just saved my life. You are a true hero
Quite simply -- YOU ROCK! Great content. Even better presentation. Thanks for making such an awesome video.
Awesome explanation. Exactly what I wanted to learn. Thanks a lot!
I was currently working on my own version of trello and this is a great help.
Thank you so much.
Everyone salute for him!
what happened to ur trello project? still working or dropped?
@@meerule I lost motivation. I also gotta do a lot besides this one. So I hope I will make this someday
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.
Thank you so much for this tutorials. I have learned so much from you. You gave me the inspiration to learn web development.
me too !!!
Great! This helps me so much with my study. You do a wonderful job! :)
Great video, man! Really loved it!
This was really helpful. Thanks Kyle.
thank you Kyle, great video, helped me finish a task. 😇
That was professional. Very well and clearly explained, Thank you indeed ,
wow!!! your explanation is incredible, i have learnt a lot ,thanks
My favorite moment in this video is 15:42 .........Man that was very straight no stop...............................Great Content.
Brilliant video man !!
Thank you for sharing
Thanks. That's awesome. A bit complicated for me but I'll get there. A very well explained tutorial.
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!
Kyle you are completely blowing our minds....
Super helpful. Man, you are awesome, I will watch other videos for sure
Thank you for this one! This is a really useful tool!
I had to watch it twice but I finally understood it.
Thank you, Kyle for the video.
Thanks man. You really create awesome content !!!
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 :)
i think you can make a column in the db that specify the priority level
Such a great video! Thank you!!
you saved my life brother, great content!
Thanks very simple explanation you saved my day
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
Excellent explanation. Thanks!
Amazing man! thanks for sharing!
Helped me alot in my To-do app.
You just saved my life ! thanks bro
Just what I was looking for. Great tutorial
Did you try it, has it succeeded?
Awesome tutorial, you are so smart . Thank you
I love your content.Thanks!
Wow! Just amazing tutorial!!!
Brooo, You are the best and Beast at the same time
Very good! Thanks for this video.
15:48 that was hilarious how you pulled that come back
I really like your videos!!👍
Fantastic explanation. Subbed.
Very Helpful bro
🙂
Great content. I'm subscribing!
Great tutorial, thanks
Best drag and drop video
Good explanation thank you
Magic of drag and drop revealed with simple steps
THanks,. I was able to build on this as a base
You are a literal GOAT
woah， thanks a lot. This video is easy to use.
I like your videos very usefull i love them it makes me try it :D and enjoy programming
thank you
Awesome tutorial. I wanted to know how to extend this to 2d layout of draggables where we can't just use y coordinate
In one word, awesome
This dude is a beast!!!
This is the only tutorial of yours that i find hard for me
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.
Thx so much, u help me a lot!
I have an idea...don't think it'll be simple, but it should be doable with your help!! thanks for the video!!
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!!!
Save my Day bro thx may God bless yu
Thank you !
Quality video!
your really incredible awesome thank you so much👌🏼👌🏼👌🏼👌🏼😊