

https://daily-dev-tips.com I write daily dev tips to contribute to the development community!
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.
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.
We useĀ flexbox to centerĀ our two divs.
.container {
display: flex;
align-items: center;
justify-content: space-around;
min-height: 100vh;
background: #efefef;
}
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;
}
Each image will beĀ absoluteĀ so we can place it anywhere in the page.
.container .parts img {
position: absolute;
}
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");
Then we need to define four basic variables we will use to store our position in.
let initX, initY, firstX, firstY;
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) => {
element.addEventListener("mousedown", function (e) {
e.preventDefault();
initX = this.offsetLeft;
initY = this.offsetTop;
firstX = e.pageX;
firstY = e.pageY;
this.addEventListener("mousemove", draggable, 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.
function draggable(e) {
e.preventDefault();
this.style.zIndex = 9;
this.style.left = initX + e.pageX - firstX + "px";
this.style.top = initY + e.pageY - firstY + "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((element) => {
window.addEventListener("mouseup", function () {
element.style.zIndex = 0;
element.removeEventListener("mousemove", draggable, 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Ā FacebookĀ orĀ Twitter
Previously published at https://daily-dev-tips.com/posts/vanilla-javascript-draggable-mr-potato-head-%F0%9F%A5%94/
Create your free account to unlock your custom reading experience.