The Drag and Drop API

Go back to JavaScript Index

What is it?

An API that enables the use of drag-and-drop in browsers, meaning: making it possible to select a draggable element and drag it to dropzone.

The draggable element

To make an element draggable, it needs to have the attribute draggable set to true - this can be done in either the HTML document on the actual element, or in JS:

Example 1: The HTML

<div id="dot" draggable="true"> </div>
1.0 | Making the element draggable using HTML

This may be considered the easy way, since no programming is involved (yet), but since this will be connected to JS at some point, we might as well do it using JS:

Example 2, part 1: The HTML

<div id="dot"> </div>
1.1 | The HTML element

Example 2, part 2: The JS

window.addEventListener('DOMContentLoaded', () => {
const element = document.getElementById("dot");
element.setAttribute("draggable", true);
});
1.2 | Making the element draggable using JavaScript

An event listener is added to the window so that the changes won't happen, before the page has finished loading.

Once the page has finished loading, the function will grab the element with id="dot" and store it in the element variable.

Once we have the element, we set the attribute "draggable" to true.

The result of the two cases is the same. We now have an element with the draggable attribute set to true, meaning that you can select the element and drag it (though it will return to its original position once you release it).

The dragstart event

Now that our element is draggable, we need to define what is going to happen when we start the drag. The event is called dragstart:

const dragstart_handler = (e) => {
e.dataTransfer.setData("text/plain", e.target.id);
}

window.addEventListener('DOMContentLoaded', () => {
const element = document.getElementById("dot");
element.setAttribute("draggable", true);
element.addEventListener("dragstart", dragstart_handler);
});
1.4 | The dragstart event

We add an event listener to the element, that - when the drag starts - calls the dragstart_handler function.

The dragstart_handler function takes the event (e) as argument, and transfers the draggable element's data in the form of its id (e.target.id).

If we do a quick test, you will see nothing else happening than before - but this is how we store the element's data while dragging it.

The dropzone

Next thing we need to do is to create a dropzone. The dropzone is another element that listens for the drop and reacts on it:

Part 1: The HTML

<div id="dot"> </div>
<div id="dotty"> </div>
1.5 | The HTML elements

Part 2: The JS

const dragstart_handler = (e) => {
e.dataTransfer.setData("text/plain", e.target.id);
}
const dragover_handler = (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
}
const drop_handler = (e) => {
e.preventDefault();
const data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
}
window.addEventListener('DOMContentLoaded', () => {
const element = document.getElementById("dot");
element.setAttribute("draggable", true);
element.addEventListener("dragstart", dragstart_handler);
const dropzone = document.getElementById("dotty");
dropzone.addEventListener("drop", drop_handler);
dropzone.addEventListener("dragover", dragover_handler)
});
1.4 | The dragstart event

An event listener is added to the element that makes up the dropzone. It will call the drop_handler function when a draggable element is released inside it. Also, another event listener is added that listens for the dragover event and then calls the dragover_handler function. Both functions are needed in order to make the drop possible.

The drop_handler function is used to retrieve the data (e.dataTransfer.getData()) and define what to do with it. In this example, it will append the element to the dropzone element, nesting it inside of it.

The dragover_handler function is used to add the drop effect, which - in this example - is to move the element (e.dataTransfer.dropEffect = "move").

The example

Instructions: Drag the red dot into the larger green one.

Assignments

Assignment 1.1 - Difficulty: Easy

Recreate the example

Assignment 1.2 - Difficulty: Medium

Add more dots and make them draggable as well. The dropzone remains the same.

Assignment 1.3 - Difficulty: Hard

When an element is dropped into an already occupied dropzone, the element already inside it is to return to it's original position - meaning that only one element is in the dropzone at a time.

Assignment 2 - Difficulty: Very hard

Make a cross and bun game where each cross and each bun is draggable and the different positions on the board are dropzones.