Drag and drop, on of my favourite functionality, so lets build a simple drag and drop functionality using vanilla javascript. We will take a look at drag events in JavaScript to be able to create drag and drop functionality.

Function Descriptions

A typical drag operation begins when a user selects a draggable element, drags the element to a droppable element, and then releases the dragged element so let's set two EventListener

fill.addEventListener('dragstart', dragStart)
fill.addEventListener('dragend', dragEnd);


for (const empty of empites)  {
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);

as there is 7 empty box so i have used a for loop to call all the drag events.

 function dragStart() {
    this.className += ' hold';
    setTimeout(() => (this.className = 'invisible'), 0); 

In this when the dragStart then i have added the hold class with our emptyBox class so the box class so it will get the .hold css style. and that particular box will get the .invisible class css when we will drag it. the time is 0 because we don't want any delay, we just want it to work after the drag start.

function dragEnd() {
    this.className = 'fill';

In this when the drag ends the div emptyBox will be fillde with < div class = "fill" draggable = "true" ></ div >

function dragOver(e) {

function dragEnter(e) {
    this.className += ' hovered';

function dragLeave() {
    this.className = 'emptyBox';


function dragDrop() {
    this.className = "emptyBox";

Here In 1st one => This will prevent the defalut action so that it's allow us to drop.

2nd one => when drag enter a box then it will get .hovered css.

3rd one => when we leave a box it will get the emptyBox property. means it will be empty.

4th one => will append the fill div withen emptyBox class.

Hope you gonna like this.