DEV Community

Cover image for Vanilla JavaScript draggable Mr Potato Head 🥔
Chris Bongers
Chris Bongers

Posted on • Edited on • Originally published at daily-dev-tips.com

Vanilla JavaScript draggable Mr Potato Head 🥔

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 parts, which we can drag on his body.

Mr. Potato Head

The result of today's article is this amazing Codepen.

HTML Structure

As for out HTML, we have a fairly simple setup.

<div class="container">
  <div class="parts">
    <img src="https://i.imgur.com/GONNbHf.png" class="draggable" />
    <img src="https://i.imgur.com/optSzq4.png" class="draggable" />
    <img src="https://i.imgur.com/qJDxc4o.png" class="draggable" />
    <img src="https://i.imgur.com/tIZGoeR.png" class="draggable" />
    <img src="https://i.imgur.com/bKlbeXU.png" class="draggable" />
    <img src="https://i.imgur.com/eUPbX3H.png" class="draggable" />
    <img src="https://i.imgur.com/voJPsR5.png" class="draggable" />
    <img src="https://i.imgur.com/dt2gqit.png" class="draggable" />
    <img src="https://i.imgur.com/2POeyJZ.png" class="draggable" />
  </div>
  <div class="body">
    <img src="https://i.imgur.com/kXbr8Tb.png" />
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

So we use the container to wrap everything, then we have our parts div, which contains each of the body-parts with a class of draggable.
And we have our body, which is Mr Potato's body.

CSS Styling

We use flexbox to center our two divs.

.container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  background: #efefef;
}
Enter fullscreen mode Exit fullscreen mode

The Parts container is then relative, and we add a small border to make it look nicer.

.container .parts {
  position: relative;
  border: 3px dashed black;
  width: 250px;
  height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

Each image will be absolute so we can place it anywhere in the page.

.container .parts img {
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

Vanilla JavaScript draggable Mr. Potato Head parts

To make an actual Mr. Potato Head, we need to make sure all the parts are draggable!

I did not use the draggable element since that requires a dropzone, and it doesn't serve this article.

Let's start by getting our elements with the class draggable.

const draggableElements = document.querySelectorAll(".draggable");
Enter fullscreen mode Exit fullscreen mode

Then we need to define four basic variables we will use to store our position in.
We also add a whichDown to see which element is dragging.

let initX, initY, firstX, firstY, whichDown;
Enter fullscreen mode Exit fullscreen mode

Next on our list is to loop over each element.

draggableElements.forEach((element) => {
    // Code here
});
Enter fullscreen mode Exit fullscreen mode

Then we need to attach a mousedown eventListener. This will be our starting point. We will define the current x and y position by using offsetLeft and offsetTop.
Then we get the mouse position x and y.

And we attach a eventListener too mousemove since that will be us, dragging a part. Once we move our mouse we call the draggable function which we will make in a second.

draggableElements.forEach((element) => {
  element.addEventListener("mousedown", function (e) {
    e.preventDefault();
    whichDown = this;
    initX = this.offsetLeft;
    initY = this.offsetTop;
    firstX = e.pageX;
    firstY = e.pageY;
  });
});

window.addEventListener("mousemove", draggable, false);
Enter fullscreen mode Exit fullscreen mode

Let's get started with our draggable function.

All this function does is change the left and top position of our part. And Set the z-index higher so it's on top.

function draggable(e) {
  e.preventDefault();
  if (!whichDown) return;
  whichDown.style.zIndex = 9;
  whichDown.style.left = initX + e.pageX - firstX + "px";
  whichDown.style.top = initY + e.pageY - firstY + "px";
}
Enter fullscreen mode Exit fullscreen mode

We calculate the original position + the dragged amount - the initial mouse x.
And the same goes for the y position.

That's cool, but we have no way of stopping it dragging now.
So let's add a mouseup listener.

window.addEventListener(
  "mouseup",
  function () {
    if (whichDown) {      
      whichDown.style.zIndex = 0;
    }
    whichDown = null;
  },
  false
);
Enter fullscreen mode Exit fullscreen mode

In this section, we add a mouseup event to our window, and once that happens, we remove the z-index from our dragging element and remove the draggable whichDown element.

That is it. We can now drag Mr. Potato Head's parts on his body!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (15)

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