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. 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 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 our two divs. flexbox to center { : flex; : center; : space-around; : ; : ;
} .container display align-items justify-content min-height 100vh background #efefef The Parts container is then relative, and we add a small border to make it look nicer. { : relative; : dashed black; : ; : ;
} .container .parts position border 3px width 250px height 100vh Each image will be absolute so we can place it anywhere in the page. { : absolute;
} .container .parts img position 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 since that requires a dropzone, and it doesn't serve this article. the draggable element Let's start by getting our elements with the class draggable. draggableElements = .querySelectorAll( ); const document ".draggable" Then we need to define four basic variables we will use to store our position in. initX, initY, firstX, firstY; let Next on our list is to loop over each element. draggableElements.forEach( { }); ( ) => element // Code here 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.addEventListener( , {
    e.preventDefault();
    initX = .offsetLeft;
    initY = .offsetTop;
    firstX = e.pageX;
    firstY = e.pageY; .addEventListener( , draggable, );
  });
}); ( ) => element "mousedown" ( ) function e this this this "mousemove" false 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. {
  e.preventDefault(); .style.zIndex = ; .style.left = initX + e.pageX - firstX + ; .style.top = initY + e.pageY - firstY + ;
} ( ) function draggable e this 9 this "px" this "px" 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. draggableElements.forEach( { .addEventListener( , {
      element.style.zIndex = ;
      element.removeEventListener( , draggable, );
    }, ); }); ( ) => element window "mouseup" ( ) function 0 "mousemove" false false // Mouse down code from above 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 mousemove listener. 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 or Facebook Twitter Previously published at https://daily-dev-tips.com/posts/vanilla-javascript-draggable-mr-potato-head-%F0%9F%A5%94/

CodePen

Facebook

Twitter

How to Recreate the Iconic Mr Potato Head 🥔 with Vanilla Javascript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Creating Mouse Tracking Eyes using Javascript 👀

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Creating Mouse Tracking Eyes using Javascript 👀

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps