An HTML with 6 boxes. In the first one you have an image which you can drag and drop using the mouse.

The HTLM and CSS are simple. The only topic you may notice is that there are a number of functions which are used to show the user when they take the image.

On the document the class selected are the boxes that are empty and the one that it is fill

const fill = document.querySelector('.fill')
const empties = document.querySelectorAll('.empty')

The fill and empties variables have an event listener which are wainting for the following events:

• dragstart
• dragend
• dragover
• dragenter
• dragleave
• drop

The events fires differents behaviuors which impacts in the visual display of the element in the HTML. Basically, the custom function fired change the CSS class so, the user sees the elment as moving from one box to another.

In the dragOver and dragEnter function we use preventDefault() function. This function in a instance method with the following quailities:

The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Event: preventDefault() method

You can see the code in this GitHub Repository: 21.drag_and_drop and the demo of the project is here: Movie App