DEV Community

Cover image for Vanilla JavaScript draggable Mr Potato Head 🥔

Vanilla JavaScript draggable Mr Potato Head 🥔

Chris Bongers on October 03, 2020

Who doesn't like Mr. and Mrs. Potato Head! Today we will be recreating the iconic Mr. Potato Head in JavaScript. Meaning we will have all his part...
Collapse
 
kosich profile image
Kostia Palchyk

Hey, Chris! Great tutorial! 👏

I've used your code to create alternative solution based on my rxjs library
It's designed to query events, something like:

select many 'mouse-move'
between 'mouse-down' and 'mouse-up'

Here's online demo with Mr. 🥔:
stackblitz.com/edit/rx-rql-mr-pota...

Hope you don't mind? 😊

Collapse
 
dailydevtips1 profile image
Chris Bongers

Wow very cool! 🤘👍

Collapse
 
unfor19 profile image
Meir Gabay • Edited

I just had to try it! Thank you for this great tutorial!
potato-head

Collapse
 
dailydevtips1 profile image
Chris Bongers

Nailed it! Haha did you have fun?

Collapse
 
unfor19 profile image
Meir Gabay

Yup, it's a great task, well done!

Collapse
 
anuraghazra profile image
Anurag Hazra • Edited

Nice, but there is a bug where if you drag & move the mouse fast, and if the mouse goes outside the bounding box of the draggable element the dragging behaviour breaks.

We can fix this by attaching mousemove listeners to the window itself. and tracking the which element is begin dragging.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Oh nice addition, did note this, while posting this morning. Gonna have a look at the fix

Collapse
 
smonetc profile image
Monet C

This is so AWESOME! Great work!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thank you! Love childish things 🤷‍♂️

Collapse
 
the_riz profile image
Rich Winter

This swell except that actual dragging responsiveness is pretty buggy/jerky - Maybe try a throttle/debounce in the event handling?

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yeah noticed this on the smaller parts, will have a look into that.

Collapse
 
madza profile image
Madza

Hahah, good job on implementing this in pure JS 😉
Most devs would search for libraries like DraggableJS 😃

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yeah and it's actually easier than reading documentation on some library haha

Collapse
 
flemer profile image
flemer

Wonderful

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks glad you like it