Beginner Drag-and-Drop Game with HTML, SCSS and JS
By: Andreea Macoveiciuc
Tags: JavaScript, Programming, HTML, Web Development, Coding

Beginner Drag-and-Drop Game with HTML, SCSS and JS

Build a simple game using the HTML5 DnD API

This short tutorial will teach you how to build a simple drag-and-drop game using the HTML5 API. The codepen is here.

The DnD behavior is native in HTML5, so you can use the API instead of trying to find workarounds with jQuery or so.

Let’s start with the big picture: in any drag-and-drop application, you’ll have draggable elements, like the pictures above, and drop areas or drop zones. In this game, we have two types of drop areas:

the boxes at the top, which contain the animal names

the container at the bottom, where the animal images are at the beginning

Any element of the page can become draggable by simply adding an attribute to the HTML code, like below:

Note that the cat picture has an attribute called draggable which is set to true .

Now, in order to enable a behavior when we start dragging an element, we need to add an event listener on the draggable node.

The DnD API allows, among others, the following events:

ondragstart - this event fires when you start dragging the element

- this event fires when you start dragging the element ondragend - this event fires when the drag action is complete

- this event fires when the drag action is complete ondragenter - this event fires when the draggable element is moved into a drop area

- this event fires when the draggable element is moved into a drop area ondragover - this event fires when you drag an element over a drop area

- this event fires when you drag an element over a drop area ondragleave - this is the opposite of ondragenter , and fires when the draggable element is pulled out of the drop area

- this is the opposite of , and fires when the draggable element is pulled out of the drop area ondrop - this event fires when you drop the element into the drop area

The first two apply to the draggable element, while the last four concern the drop zone.

So here’s how you need to think when creating this game. First, you need to make an element draggable. I’ve shown how to do this above.

Next step is to attach the needed event listeners to the draggable element. In our case, we want something to happen when we start dragging the images, so we’ll add the following:

// on the image, we add ondragstart="drag(event)" https://www.veterinarypracticenews.com/wp-content/uploads/2019/10/bigstock-Four-Kittens-On-A-White-Backgr-2730282.jpg " draggable="true" ondragstart="drag(event)" width="300"> // in our JS file, we define the drag() function function drag(event) {

event.dataTransfer.setData("text", event.target.id);

}

When you start dragging the image, the drag(event) function is called. In this function, the dataTransfer property holds the event’s data and comes with specific methods for managing the dragged data.

The method used above, setData() , is used for adding an item to the dragged data. You can use different types of data, and the value of the dragged data is defined by the event.target.id .

Now we’re done with the draggable element, so we can move on to the drop areas. First, we want these areas to accept children, when we drop something. So we need to indicate that something should happen:

when we drag an element on top of the drop zone

when we drop the element in the drop area

To define the drop zone, we use the ondragover event.

<div id="animals" ondrop="drop(event)" ondragover="allowDrop(event)">

The two JS functions look like this:

function allowDrop(event) {

event.preventDefault();

} function drop(event) {

event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(document.getElementById(data));

}

We’re using event.preventDefault() to cancel the default behavior of these divs. We do this because by default an element can’t be dropped in another element, but we want it to.

So to indicate that a zone can accept draggable elements, we use the allowDrop() function. Then, to indicate what should happen when we drop the picture, we use the drop() function.

Just like before, we’re preventing the default behavior and mentioning the data type that can be dropped in the drop area. Then, we’re appending the image to the drop area, once dropped.

Here’s the final code:

// HTML <div id="dropZone">

<div

id="dropBox1"

ondrop="drop(event)"

ondragover="allowDrop(event)"

>

<p>Fish</p>

</div>

<div

id="dropBox2"

ondrop="drop(event)"

ondragover="allowDrop(event)"

>

<p>Mouse</p>

</div>

<div

id="dropBox3"

ondrop="drop(event)"

ondragover="allowDrop(event)"

>

<p>Cat</p>

</div>

<div

id="dropBox4"

ondrop="drop(event)"

ondragover="allowDrop(event)"

>

<p>Dog</p>

</div>

</div>

id="animals"

ondrop="drop(event)"

ondragover="allowDrop(event)"

>

<img

id="cat"

src="

draggable="true"

ondragstart="drag(event)"

width="300"

/> https://www.veterinarypracticenews.com/wp-content/uploads/2019/10/bigstock-Four-Kittens-On-A-White-Backgr-2730282.jpg draggable="true"ondragstart="drag(event)"width="300"/>

id="dog"

src="

draggable="true"

ondragstart="drag(event)"

width="300"

/> https://www.wallpaperflare.com/static/800/62/574/puppies-white-background-paws-yellow-wallpaper-preview.jpg draggable="true"ondragstart="drag(event)"width="300"/>

id="mouse"

src="

draggable="true"

ondragstart="drag(event)"

width="300"

/> https://www.adamspestcontrol.com/cms-files/size-992x992/adams-mouse-600x600.jpg draggable="true"ondragstart="drag(event)"width="300"/>

id="fish"

src="

draggable="true"

ondragstart="drag(event)"

width="300"

/>

</div> https://cdn.mos.cms.futurecdn.net/uhLVL2jTdtQ7ScXCeoeAU6-650-80.jpg.webp draggable="true"ondragstart="drag(event)"width="300"/>

Then, the styles:

// SCSS #dropZone,

#animals {

display: flex;

flex-flow: row nowrap;

justify-content: space-between;

min-height: 200px;

margin-bottom: 20px;

} #dropBox1,

#dropBox2,

#dropBox3,

#dropBox4 {

display: flex;

flex-flow: column nowrap;

justify-content: center;

align-items: center;

height: 250px;

width: 250px;

border: 1px solid #aaaaaa;

padding: 1rem;

} img {

height: 200px;

object-fit: cover;

width: 200px;

}

And finally, the JavaScript code:

// JS function allowDrop(event) {

event.preventDefault();

} function drag(event) {

event.dataTransfer.setData("text", event.target.id);

} function drop(event) {

event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(document.getElementById(data));

}

And here you can find the code. I hope you enjoyed it!