Drag & Drop With Vanilla JS
HTML-код
- Опубликовано: 21 май 2018
- In this video we will take a look at drag events in JavaScript to be able to create drag and drop functionality
Code:
codepen.io/bradtraversy/pen/o...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
The Developer Hangout: Public Discord Server
/ discord 
Наука
![A Day To Remember: Feedback [OFFICIAL VIDEO]](http://i.ytimg.com/vi/iXVnysmQ4e0/mqdefault.jpg)
I forgot to mention I do have a 21 hour course on vanilla JS on Udemy if anyone is interested here is a $10 code.
www.udemy.com/modern-javascript-from-the-beginning/?couponCode=RUclips10
bought it and have been working through it slowly. excellent course, full of easy to follow content.
Are you will make react course i mean react front to back like angular not the course that you explain projects, please we need essential course with projects.
Working through it now - great course Brad! Anyone who wants to _really_ know javascript should take Brad's course ;-)
Definitly a great course I just got past the ajax part and it's great I can finally do some kool apps with my laravel backends, I do have one request for once if you can get a chance to do a tailwind css course that would be great Thanks Brad
Got it and can't wait to go through it.
Hi. Thanks for an amazing tutorial as always! I would do two improvements to this code:
1. requestAnimationFrame() instead of setTimeout()
2. classList.add() & classList.remove() instead of manipulating className string
Thanks again! Keep on doing amazing work!
classList.toggle is pretty neat too
I just used requestAnimationFrame and it works great thank you.
About rAF that function works on similar principles like setTimeout, but there is one thing which change everything. setTimeout based on queues executed codes (rude but it is), every setTimeout in running code is set at the end of such queue, and when queue will come to the next setTimeout, that setTimeout will be execute. rAF practically is same, but it will be invoked also like setTimeout but with one optimization thing, it's synchronization with HZ of your display. So rAF may be called faster than setTimeout or against slower, it all depends on your monitor mostly.
You should see lecture about Event Loop or Jake Archibald: In The Loop.
I gotta say, as far as content, this is one of the best tuts I've watched. You described the topic of the video (drap & drop & their listeners) on a basic level without going into every single other feature you were using (callbacks, timeouts, etc.). A simple thing, but my biggest complaints on other tutorial channels. I came here to learn drag and drop, and I did. Thank you, subbed.
Bruh, I love your teaching style, and how you are so clear and how you show how things work instead of just watching you code. Purchased a bunch of your courses to support and subscribed (yes aiming for a cookie here) but love your lessons and thanks!
Thank you for such a complete tutorial for basics and beginners on this. I love how you took the time to show us the consolw events firing off .. really made it so much more understandable!
i was looking for drag n drop! thanks Brad! God bless you and your family
Thank you brother
Traversy Media you deserve it bro!
Whenever I think of implementing something in project, on the very next day sir Brad have Video on that. Really amazing. Thank you very much for your great efforts.
I wish more people taught like you do. You not only make sure I understand, but you explain things in a way that I can't misunderstand. I love it!
Your videos don't get more helpful than this. Thank you so much for not only teaching us this but do it in a way that ANYONE can understand. Truly appreciate you, man!
Thanks for the free drag and drop tutorial. Whenever I need something related to programming language , first thing comes to my mind is this channel(traversy media). Your channel is in top of my list. I appreciate your work..
Thank you for doing these sorts of videos. It makes it easy for me to learn at my own speed.
This was also not nearly as complex as I thought it would be. I have a new understanding for how to structure such things in vanilla.
Love this channel....I have learnt Laravel, Vue.js, Building REST Service and what not....Best of the best.....
Arpan Mukherjee Go Lavavel and vuejs!
These new videos can be overwhelming, I am trying to stick to learning just a few web development languages that fit within my schedule but EVERY pop UP notification from Brad, are irresistible.. There is a new thing to learn or a word for motivation to upcoming developers..Thanks Brad, You the best.
I realize that. What I always suggest is having a core set of technologies that you REALLY dig into and learn through various resources BUT it does not hurt to watch and learn other things just to grasp the coding concepts, etc. A lot of time it will help you in just general logic and understanding in programming in general.
Traversy Media Thanks a bunch, you always a source of my Motivation..
Great point Sam C
You know I was on the train home yesterday dead tired and I went on RUclips to watch some chill videos and I saw that one and I got sooo excited that even after a whole day of work I had to watch this :D thanks Brad :)))
The one and only Brad, who can explain JS so well anyone can understand. Thank you very much :)
thanks brad, I've studied javascript in your channel for a while and recently at my first task end up in here again! hahaha. thanks for the knowledge, happy new year.
domElement.classList.toggle('hovered'); Way easier to understand and the support is there (for IE), as long as you use just one parameter (the class name string). There are also .add(), .remove(), .contains() and .replace() methods for dealing with CSS classes. Nice video!
im doing my first js applicationa and you have some great content. not the first time this week im ending up with a video of yours. Cheers!
Basics of Kanban board 😅 Amazing work Brad! I am really glad there are developers like you who exist to contribute genuinely to teach people! Great tutorial 😊👍
This is a great tutorial. I would traditionally implement this with a library but now I am definitely going to be doing pure Vanilla for these. Thanks Brad
Brad I cannot tell you how much I appreciate your videos. Please keep making this amazing content. Love your channel and love your Udemy courses.
You never fail to amaze Brad, splendid tutorial, god bless you and your family, keep up the hard work 👍.
This video is very helpful. I just want to mention that I used a different solution to see only 1 picture while being dragged, under the cursor and not on the original place. I simply added to the . hold in the CSS an opacity: 0% attribute. This way while the picture is being dragged, the original picture in the original place becomes invisible. This might not be the most elegant solution but you do not have to use setTimeout().
Anyway, you just shortened my home assignment a lot so thank you! :)
As someone who hasn't started learning frameworks yet, this helps me a lot, will implement it in my js game, thanks brad.
I've been looking for this for the past few days
These console messages were really useful. It helped me a lot to understand when what is run.
Awesome tutorials for drag events in front-end design! Thank you Brad!
man, javascript has advanced over the years. It's really intuitive and easy to do all these complex things now. Hooray for progress! And thanks for your tutorial btw, making it look effortless is not easy, you're doing it good man.
Many thanks brad this is what I was trying to do this week
Short video and straight to the point. Excellent!
I'll be using this for my final project at my internship. Thank you!
Another high quality video!!! I learned so much updated JS from you, thank u, sir^_^
You struggle searching how to do something with your app... Brads got you.
Thanks man!!!
I saw this on my RUclips dash and said "Yeeeeeees". Love the tutorials, Brad!
Hey Brad! I can't thank you enough for sharing your knowledge & helping others achieve their goals.. thank you so much. I wanna be one of your Patron in a near future!!
Oh Brad you do make my day, thank you so much for all your hard work!
Thank you, sir.
because of you, I was able to learn HTML, CSS, js and bootstrap in my summer vacations.
god bless you and your family.
You are the best Brad! Thank you very much. Every time I watch your videos, I learn something new, simple and (that is important) very interesting
Excellent tutorial without unnecessary and complicated details.
Awesome tutorial :). I was thinking of doing it yesterday and you made it easier! Thanks:)
Great video. It's incredible how you keep doing videos explaining things I would need to look up in near future.
Really, really great video and in-depth explanation. Thanks for sharing Brad!
i love the way you try to make us understand whats going on really :)
Please Brad can you do more this kind of short and very useful courses !🙏
And Thanks a lot! We love you💕
your tutorial style is excellent. thank you so much man. clear and easy to follow
Sir, your tutorials are so awesome..
Thanks :)
this is the best video i have ever seen, i mean, the way you explain it is really amazing; sorry about my english.
Man come on!!! you make everything look extremely easy, you are the one, God bless you
14:08 You can mark the lines you want to copy and then shift+alt+arrow key to instantly copy&paste.
Nice Guide on Drag & Drop! You helped me implenting this on my Dungeon & Dragons Browser Game :)
Thanks, yeah I learned that a bit after this video :)
I can not thank you enough man. You are saving my day almost everyday!
Thank you, man. A very good introduction to drag&drop event.
Your pronounciation and expression is very clear, I can easily understand you. Thanks bro
Wish I could've had this video some months back when I had to do this at my first job... In the end had to settle using jQuery. Really nice video, thank you!
Great job explaining everything, very much appreciated!
Brad is a Javascript Rockstar in the youtube earth
The way Brad delivers content is next level. After having watched his videos for some time, I became a picky learner.
Appreciate the explanation of what is going on - good stuff!
Amazing work once again.
I also support you on Patreon. Never regret a single dollar spent.
I love this channel
thanks man , always surprising us with something new :)
Exactly what I was looking for. Thanks, Brad, for save me one more time!
Amazing explanation and very simple and direct! Thank you!
Nice video very clear and simple and strait to the point, keep up the good work
Love you Brad. You're a nice guy!
Thank you Brad! Saved me a bunch of time, amazing!
Brad Traversy !! I love you brother from the bottom of my heart, you really changed my life :)
Thanks for a very nice video on dragevents! I loved it!
*Amazing Brad ! Hope more js videos coming*
You are the best man, simply the best. Your tutorials have so much helped me especially for Vanilla js. Thanks and
God bless You
to be honest amazing tuts, i was looking for something like it..., and the console.log explanation was top notch.
Great tutorial.
Really helpful, thank you so much Brad!
Man, you've saved me! This tutorial was awesome!
Love your videos brad, keep it up !
Love your work sir 😍 . Now I am 14year old and learned js and done few projects just because of you .You gave me love for coding thanks sir .😊
That is awesome. I wish I got started that young. Keep that up and you'll run circles around other devs when you're older
you swapped your age numbers ... it's 21
Male Man what to say ..haters come every where .You do your work I will do mine.Thanks 😊😊😊😊
Traversy Media thanks for this advice sir 😊 love for code😋
Well done! Very concise and informative!
Terrific tutorial as usual. The only one comment I felt was missing was the fact that the .append() method removes the element from its prior container automatically (which is clear as you watch the elements in the Developer Tool window), but I remember wondering why there wasn't a remove() method to detach an element from the original container.
perfect tuts Brad (as always)!
Another great tutorial, thanks Brad!
This is great tutorial! Thank you Brad.
*Awesome!* I was struggling to do good drag&drop on es5 but it's so much easier on es6
Very instructive and useful. Thanks!
Found this channel today. Subbed.
Thank you very much for sharing, exact video I was looking for.
Im a python guy but with your videos i have learnt a lot thanks for the time youbput on this man
Thank you Brad! Awesome as always
very good video and explanation, i found what i searched for
very simple and neat
Just buy your Vanilla JavaScript course, I hope I will learn lots of new things from that udemy course. Thank you, Brad.
You are amazing. This is so much helpful. Thank you!
Брэд, ты классный специалист! Спасибо )))
Best programming channel🙌
Your tutorials are awesome!
Nice and informative.. Thanks Brad! Love your content..
Loving you intro to JavaScript Udemy course right now!
Awesome, this gave me great ideas, thanks Brad, u rock!
Fantastic, this is what I was looking for
Great tutorial, as always, Brad. Could you do a part 2 where all the divs are filled but if you pick up an image from one div, and drop it on another filled div, the image from the first div replaces that from the second div. On drop, the image from the second div, would move to the now empty first div. I hope this make sense.
Wow, this's much easy than when I implemented drag and drop over ten years ago!
Awesome video! Thanks Brad :)
Thanks, Brad. Great video!