31 lines
855 B
HTML
31 lines
855 B
HTML
<!DOCTYPE html>
|
|
<html lang="en"></html>
|
|
|
|
<head>
|
|
<title>Drag File Example</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="drop_zone"
|
|
style="width: 100%; height: 100vh; border: 2px dashed #000;position: absolute;top: 0;left: 0;z-index: 99999999;"
|
|
draggable="true"></div>
|
|
<script>
|
|
// 获取拖放区域
|
|
const dropZone = document.getElementById('drop_zone');
|
|
|
|
// 设置拖放事件监听器
|
|
dropZone.addEventListener('dragover', function (event) {
|
|
event.preventDefault(); // 阻止默认行为
|
|
event.dataTransfer.dropEffect = 'copy'; // 设置可视效果
|
|
});
|
|
|
|
dropZone.addEventListener('drop', function (event) {
|
|
event.preventDefault(); // 阻止默认行为
|
|
const files = event.dataTransfer.files; // 获取拖入的文件
|
|
console.log(files);
|
|
// 处理文件...
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |