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
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
Example 2, part 2: The JS
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:
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.
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
Part 2: The JS
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").
Instructions: Drag the red dot into the larger green one.
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.