body {
  display: flex;
  gap: 100px;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

const handleDragStart = e => {
  console.log("drag start");

  const canvas = document.createElement("canvas");
  canvas.width = canvas.height = 100;

  const ctx = canvas.getContext("2d");
  ctx.font = '100px monospace';
  ctx.fillText('🐯', 0, canvas.height);
  const img = new Image()
  const dataURL = canvas.toDataURL();
  img.src = dataURL;
  
  const dt = e.dataTransfer;
  dt.setDragImage(img, 100, 100);
  dt.setData("text/plain", dataURL);
}

const handleDrop = e => {
  e.preventDefault();
  console.log("drop");
  
  if (e.target.tagName !== 'DIV')  {
    return;
  }
  
  const data = e.dataTransfer.getData("text");
  const img = document.createElement("img");
  img.src = data;
  e.target.replaceChild(img, e.target.firstChild);
}

const handleDragOver = e => {
  e.preventDefault();
  console.log("dragover");
}

document.addEventListener("DOMContentLoaded", () => {
  const dragEl = document.querySelector("#dragEl");
  dragEl.addEventListener("dragstart", handleDragStart);
  
  const dropEl = document.querySelector("#dropEl");
  dropEl.addEventListener("drop", handleDrop);
  dropEl.addEventListener("dragover", handleDragOver);
})