console 命令行工具 X clear

console

const img = document.querySelector("img");
const containers = document.querySelectorAll(".container");

img.addEventListener("dragstart", (e) => {
  setTimeout(() => {
    img.style.visibility = "hidden";
  });
});
img.addEventListener("dragend", (e) => {
  img.style.visibility = "visible";
});

containers.forEach((container) => {
  container.addEventListener("dragenter", () => {
    container.classList.add("drag-over");
  });
  container.addEventListener("dragover", (e) => {
    e.preventDefault();
  });
  container.addEventListener("dragleave", () => {
    container.classList.remove("drag-over");
  });
  container.addEventListener("drop", () => {
    container.classList.remove("drag-over");
    container.appendChild(img);
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">

  <title>Document</title>
</head>

<body>
  <div class="container">
    <img src="https://source.unsplash.com/random/150x150" draggable="true">
  </div>
  <div class="container"></div>
  <div class="container"></div>
  <div class="container"></div>
  <div class="container"></div>
  <script src="./script.js"></script>

</body>

</html>

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #4682b4;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100vh;
}

.container {
  width: 150px;
  height: 150px;
  background-color: #fff;
  border: 4px solid #000;
}

.container.drag-over {
  border: 4px dashed #eee;
  background: #333;
}

img {
  cursor: move;
}