Creating a draggable element with JavaScript
Recently, I made this cute lil CodePen buddy in an attempt to learn more about creating draggable UI elements with vanilla JS instead of relying on a JS library to do it for me. Basically, you can drag him all around his container, but he hates getting bumped against the sides. If you do it more than five times, he even faints.
See the Pen Move Me: draggable element without jQuery UI by Stephanie (@ramenhog) on CodePen.
Not long after making this CodePen, I was given the amazing opportunity to host the April Lunch ’n Learn for elaConf, an incredibly supportive conference/community for women in tech. So naturally, I decided to present about my draggable buddy and walk through the concepts behind draggable elements with JavaScript. If you missed the Lunch ’n Learn, or want a refresher on the topic, feel check out the recording here:
I hope you find the video helpful and are inspired to take these basic concepts and expand on them to create your own draggable buddy or some other draggable interface with vanilla JS! Enjoy!
