script.js

const fill = document.querySelector(".fill");
const empties = document.querySelectorAll(".empty");

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

const dragEnd = function () {
  this.className = "fill";
};

const dragOver = function (e) {
  // Ref: https://developer.cdn.mozilla.net/en-US/docs/Web/API/Document/dragover_event
  e.preventDefault();
};

const dragEnter = function (e) {
  e.preventDefault();
  this.className += " hovered";
};

const dragLeave = function () {
  this.className = "empty";
};

const dragDrop = function () {
  this.className = "empty";
  this.append(fill);
};

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

for (const empty of empties) {
  empty.addEventListener("dragover", dragOver);
  empty.addEventListener("dragenter", dragEnter);
  empty.addEventListener("dragleave", dragLeave);
  empty.addEventListener("drop", dragDrop);
}