43 lines
783 B
Svelte
43 lines
783 B
Svelte
<script>
|
|
let isdragenter = false;
|
|
|
|
function dragenter(event) {
|
|
isdragenter = true;
|
|
}
|
|
function dragleave(event) {
|
|
isdragenter = false;
|
|
}
|
|
function dragover(event) {
|
|
// Do nothing
|
|
}
|
|
function drop(event) {
|
|
console.log(event.dataTransfer.items);
|
|
}
|
|
</script>
|
|
|
|
<div on:dragenter={dragenter} on:dragleave={dragleave} on:dragover|preventDefault={dragover} on:drop|preventDefault={drop}>
|
|
<div class="instructions" class:isdragenter>
|
|
Drop photos here
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.instructions {
|
|
margin: calc(var(--spacing) * 2);
|
|
padding: 1rem;
|
|
|
|
border: 2px dashed #000;
|
|
border-radius: 0.5rem;
|
|
opacity: 0.333;
|
|
|
|
text-align: center;
|
|
font-weight: 550;
|
|
pointer-events: none;
|
|
}
|
|
.instructions.isdragenter {
|
|
opacity: 0.666;
|
|
}
|
|
</style>
|
|
|
|
<!-- vim: set ft=html: -->
|