fix: 드래그 앤 드롭 — window 이벤트로 브라우저 기본 동작 차단
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
import { api } from '$lib/api';
|
import { api } from '$lib/api';
|
||||||
import { addToast } from '$lib/stores/ui';
|
import { addToast } from '$lib/stores/ui';
|
||||||
import { Upload } from 'lucide-svelte';
|
import { Upload } from 'lucide-svelte';
|
||||||
@@ -10,14 +11,22 @@
|
|||||||
let uploadFiles = $state([]);
|
let uploadFiles = $state([]);
|
||||||
let dragCounter = 0;
|
let dragCounter = 0;
|
||||||
|
|
||||||
function handleDragEnter(e) {
|
onMount(() => {
|
||||||
|
function onDragEnter(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
dragCounter++;
|
dragCounter++;
|
||||||
dragging = true;
|
dragging = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleDragLeave(e) {
|
function onDragOver(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDragLeave(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
dragCounter--;
|
dragCounter--;
|
||||||
if (dragCounter <= 0) {
|
if (dragCounter <= 0) {
|
||||||
dragging = false;
|
dragging = false;
|
||||||
@@ -25,16 +34,29 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleDragOver(e) {
|
function onDrop(e) {
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDrop(e) {
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
dragging = false;
|
dragging = false;
|
||||||
dragCounter = 0;
|
dragCounter = 0;
|
||||||
|
handleFiles(e.dataTransfer?.files);
|
||||||
|
}
|
||||||
|
|
||||||
const files = Array.from(e.dataTransfer?.files || []);
|
window.addEventListener('dragenter', onDragEnter);
|
||||||
|
window.addEventListener('dragover', onDragOver);
|
||||||
|
window.addEventListener('dragleave', onDragLeave);
|
||||||
|
window.addEventListener('drop', onDrop);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('dragenter', onDragEnter);
|
||||||
|
window.removeEventListener('dragover', onDragOver);
|
||||||
|
window.removeEventListener('dragleave', onDragLeave);
|
||||||
|
window.removeEventListener('drop', onDrop);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
async function handleFiles(fileList) {
|
||||||
|
const files = Array.from(fileList || []);
|
||||||
if (files.length === 0) return;
|
if (files.length === 0) return;
|
||||||
|
|
||||||
uploading = true;
|
uploading = true;
|
||||||
@@ -74,16 +96,9 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:document
|
|
||||||
on:dragenter={handleDragEnter}
|
|
||||||
on:dragleave={handleDragLeave}
|
|
||||||
on:dragover={handleDragOver}
|
|
||||||
on:drop={handleDrop}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 전체 페이지 드래그 오버레이 -->
|
<!-- 전체 페이지 드래그 오버레이 -->
|
||||||
{#if dragging}
|
{#if dragging}
|
||||||
<div class="fixed inset-0 z-50 bg-[var(--accent)]/10 border-2 border-dashed border-[var(--accent)] flex items-center justify-center pointer-events-none">
|
<div class="fixed inset-0 z-50 bg-[var(--accent)]/10 border-2 border-dashed border-[var(--accent)] flex items-center justify-center">
|
||||||
<div class="bg-[var(--surface)] rounded-xl px-8 py-6 shadow-xl text-center">
|
<div class="bg-[var(--surface)] rounded-xl px-8 py-6 shadow-xl text-center">
|
||||||
<Upload size={32} class="mx-auto mb-2 text-[var(--accent)]" />
|
<Upload size={32} class="mx-auto mb-2 text-[var(--accent)]" />
|
||||||
<p class="text-sm font-medium text-[var(--accent)]">여기에 파일을 놓으세요</p>
|
<p class="text-sm font-medium text-[var(--accent)]">여기에 파일을 놓으세요</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user