File size: 1,047 Bytes
de4b571 11fcc5a de4b571 11fcc5a de4b571 11fcc5a de4b571 11fcc5a de4b571 11fcc5a de4b571 11fcc5a de4b571 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<script lang="ts">
import type { Snippet } from "svelte";
type Props = {
id: string;
draggedOver?: boolean;
files: FileList | undefined;
onDrop: () => {};
children?: Snippet;
};
let {
id,
draggedOver = $bindable(false),
files = $bindable(),
onDrop,
children,
}: Props = $props();
const dropHandler = async (ev: DragEvent) => {
draggedOver = false;
ev.preventDefault();
if (ev?.dataTransfer?.files && ev?.dataTransfer?.files.length > 0) {
files = ev.dataTransfer.files;
onDrop();
}
};
const dragOverHandler = (ev: DragEvent) => {
draggedOver = true;
ev.preventDefault();
};
</script>
<div
{id}
role="region"
ondrop={(ev) => dropHandler(ev)}
ondragover={(ev) => dragOverHandler(ev)}
ondragend={() => {
draggedOver = false;
}}
ondragleave={() => {
draggedOver = false;
}}
>
{@render children?.()}
</div>
|