<!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" />
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
main {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
background-color: hsl(0deg, 0%, 10%);
}
.draggable-container {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.draggable,
.droppable {
border-radius: 4px;
}
.draggable {
width: 25vw;
height: 25vw;
background: #00d9ff;
}
.droppable {
width: 30vw;
height: 30vw;
border: 8px dashed #00d9ff;
position: relative;
display: grid;
place-items: center;
}
.droppable::before {
display: block;
content: "请拖放到此区域";
position: absolute;
color: white;
font-family: sans-serif;
font-size: 3vw;
color: hsl(0, 0%, 30%);
}
.droppable img {
width: 80%;
height: 80%;
object-fit: contain;
}
.dragover {
border: 8px dashed #ffae00;
}
.dropped {
border: 8px dashed #48ff00;
}
.dropped::before {
z-index: -1;
}
</style>
<title>原生拖拽</title>
</head>
<body>
<main>
<div class="draggable-container">
<div id="draggable" class="draggable" draggable="true"></div>
</div>
<div id="droppable" class="droppable"></div>
</main>
<script>
const draggable = document.getElementById("draggable");
const droppable = document.getElementById("droppable");
draggable.addEventListener("dragstart", handleDragStart);
droppable.addEventListener("dragover", handleDragover);
droppable.addEventListener("dragleave", handleDragLeave);
droppable.addEventListener("drop", handleDrop);
function handleDragStart(e) {
e.dataTransfer.setData("text/plain", e.target.id);
// 有 copy、move、和 auto 三种，分别是把鼠标指针
// 显示为复制样式（带+号）、移动样式，或自动设置样式
// e.dataTransfer.dropEffect = "move";
}
function handleDragover(e) {
e.preventDefault();
droppable.classList.add("dragover");
// e.dataTransfer.dropEffect = "move";
}
function handleDragLeave(e) {
droppable.classList.remove("dragover");
}
function handleDrop(e) {
e.preventDefault();
// 如果是文件
[...e.dataTransfer.items].forEach((item) => {
if (item.kind === "file") {
const file = item.getAsFile();
createPreview(file);
}
});
// 如果是元素
const draggedId = e.dataTransfer.getData("text/plain");
droppable.appendChild(document.getElementById(draggedId));
droppable.classList.add("dropped");
}
function createPreview(imageFile) {
if (!imageFile.type.startsWith("image/")) {
return;
}
const image = document.createElement("img");
image.src = URL.createObjectURL(imageFile);
image.onload = function () {
URL.revokeObjectURL(this.src);
};
droppable.appendChild(image);
}
</script>
</body>
</html>
