src/components/PluginDragAndDrop.vue

<template>
    <div
        v-if="showOverlay"
        class="drag-area-overlay"
        @drag="onDrag"
        @drop.prevent="onDropFile"
        @dragleave="onDragEnd"
        @dragover.prevent
    >
        <div class="drag-area" ref="dragArea">
            <div class="drag-area-inner">
                <div class="drag-area-icon" ref="dragAreaIcon">
                    <svg ref="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.16168 2H17.8388C18.3659 1.99998 18.8206 1.99997 19.1951 2.03057C19.5904 2.06288 19.9835 2.13421 20.3619 2.32698C20.9258 2.61431 21.3853 3.07276 21.6732 3.63781C21.8659 4.016 21.9372 4.40906 21.9695 4.80397C22 5.17815 22 5.6323 22 6.15839V17.829C22 18.2113 22 18.5533 21.9891 18.8513C22.0099 18.991 22.0009 19.1336 21.963 19.2692C21.9278 19.6411 21.8528 20.0089 21.6732 20.3614C21.3859 20.9254 20.9269 21.3854 20.3619 21.6732C19.9838 21.8659 19.591 21.9372 19.1962 21.9695C18.8221 22 18.3682 22 17.8421 22H6.15839C5.6323 22 5.17815 22 4.80397 21.9695C4.40906 21.9372 4.016 21.8659 3.63781 21.6732C3.07224 21.3851 2.61405 20.9248 2.32698 20.3614C2.1459 20.006 2.07224 19.6385 2.03707 19.2684C2.00299 18.91 2.00043 18.4848 2.00005 18.0009L2 6.16168C1.99998 5.63451 1.99997 5.17965 2.03057 4.80499C2.06286 4.40962 2.13416 4.01625 2.32698 3.63781C2.6146 3.07332 3.07332 2.6146 3.63781 2.32698C4.01625 2.13416 4.40962 2.06286 4.80499 2.03057C5.17965 1.99997 5.6345 1.99998 6.16168 2ZM20 16.1489V6.19691C20 5.62146 19.9992 5.2498 19.9761 4.96686C19.9539 4.69554 19.9163 4.59501 19.8912 4.54579C19.7956 4.35819 19.6426 4.20516 19.4539 4.109C19.4044 4.08378 19.3037 4.04612 19.0322 4.02393C18.7489 4.00078 18.3768 4 17.8002 4H6.2002C5.62365 4 5.25126 4.00078 4.9678 4.02393C4.69595 4.04614 4.59517 4.08383 4.54579 4.109C4.35763 4.20487 4.20487 4.35763 4.109 4.54579C4.08383 4.59517 4.04614 4.69595 4.02393 4.9678C4.00078 5.25126 4 5.62365 4 6.2002V15.2969L7.00872 11.7867C7.01123 11.7838 7.01376 11.7809 7.01631 11.778C7.02192 11.7714 7.02753 11.7649 7.03312 11.7583C7.22465 11.5348 7.40785 11.3211 7.57649 11.1557C7.75846 10.9772 7.99724 10.7788 8.32112 10.6639C8.7629 10.5073 9.24495 10.5111 9.68363 10.6735C10.0058 10.7928 10.2418 10.9944 10.4216 11.1756C10.5884 11.3437 10.7691 11.5606 10.9582 11.7876L13.6513 15.0193C13.8552 15.2641 13.9691 15.3994 14.0587 15.4901C14.0618 15.4933 14.0648 15.4963 14.0677 15.4991C14.0715 15.496 14.0756 15.4926 14.0798 15.489C14.1779 15.4062 14.3046 15.2807 14.5317 15.0536L15.0521 14.5332C15.2502 14.335 15.4408 14.1444 15.6145 13.998C15.803 13.8392 16.0453 13.6669 16.3624 13.5753C16.7991 13.4493 17.2639 13.4769 17.6805 13.649C17.9851 13.7747 18.2067 13.9722 18.3768 14.1509C18.5339 14.3162 18.7029 14.5275 18.8788 14.7473L20 16.1489ZM4.00147 18.3684C4.00403 18.6735 4.01085 18.8978 4.02809 19.0791C4.05053 19.3152 4.08546 19.4072 4.10899 19.4534C4.20542 19.6427 4.35871 19.7959 4.54579 19.8912C4.595 19.9163 4.69554 19.9539 4.96686 19.9761C5.2498 19.9992 5.62146 20 6.19691 20H17.8036C18.379 20 18.7505 19.9992 19.0332 19.9761C19.3041 19.954 19.4046 19.9164 19.4539 19.8912C19.6415 19.7956 19.7951 19.6421 19.8912 19.4534C19.9069 19.4226 19.9265 19.374 19.9444 19.2809L17.3358 16.0202C17.1319 15.7653 17.0175 15.6239 16.9275 15.5293C16.9234 15.5249 16.9195 15.5208 16.9158 15.517C16.9119 15.5202 16.9078 15.5236 16.9034 15.5273C16.8033 15.6117 16.6739 15.7398 16.4429 15.9708L15.9221 16.4917C15.7279 16.6859 15.5406 16.8732 15.3698 17.0173C15.1839 17.1743 14.9453 17.3443 14.6331 17.4364C14.2076 17.562 13.7489 17.5446 13.3299 17.3784C13.0278 17.2586 12.8059 17.0678 12.6357 16.8955C12.4793 16.7371 12.3107 16.5347 12.1364 16.3255L9.44369 13.0943C9.22392 12.8306 9.09951 12.6827 9.00173 12.5841C8.99732 12.5797 8.99314 12.5755 8.98919 12.5716C8.98531 12.5753 8.98123 12.5793 8.97693 12.5835C8.87788 12.6807 8.75167 12.8266 8.52864 13.0868C8.52613 13.0897 8.52359 13.0926 8.52104 13.0955L4.00147 18.3684ZM13 8C13 6.89543 13.8954 6 15 6C16.1046 6 17 6.89543 17 8C17 9.10457 16.1046 10 15 10C13.8954 10 13 9.10457 13 8Z" fill="currentColor"/>
                    </svg>
                </div>
                <div class="drag-area-title">
                    <p>Drop Image to <br/>Start Search</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';


const eventHasDragStart = ref(false);
const showOverlay = ref(false);
const dragArea = ref<HTMLDialogElement | null>(null);


const onDragEnter = (): void => {
    if (eventHasDragStart.value) return;
    showOverlay.value = true;
};

const onDropFile = (event: DragEvent): void => {
    showOverlay.value = false;
    event.preventDefault();
    emit('upload-file', event);
};

const onDragStart = (): void => {
    eventHasDragStart.value = true;
};

const onDragEnd = (): void => {
    eventHasDragStart.value = false;
    showOverlay.value = false;
};

const onDrag = (event: DragEvent): void => {
    const { clientX, clientY } = event;
    let newX = 0, newY = 0;
    const screenWidth = document.body.clientWidth;
    const screenHeight = document.body.clientHeight;

    if (clientX < 100) {
        newX = 100;
    } else if (clientX + 100 > screenWidth) {
        newX = screenWidth - 100;
    } else {
        newX = clientX;
    }

    if (clientY < 100) {
        newY = 100;
    } else if (clientY + 100 > screenHeight) {
        newY = screenHeight - 100;
    } else {
        newY = clientY;
    }

    if (dragArea.value) {
        dragArea.value.style.top = `${newY}px`;
        dragArea.value.style.left = `${newX}px`;
    }
};


onMounted(() => {
    window.addEventListener('dragover', onDrag);
    window.addEventListener('dragenter', onDragEnter);
    window.addEventListener('dragstart', onDragStart);
});

onBeforeUnmount(() => {
    window.removeEventListener('dragover', onDrag);
    window.removeEventListener('dragenter', onDragEnter);
    window.removeEventListener('dragstart', onDragStart);
});


const emit = defineEmits<{
    (e: 'upload-file', event: DragEvent): void;
}>();
</script>

<style scoped lang="scss">
@import "@/assets/mixins";
@import '@plugin/assets/_variables_override.scss';

.drag-area-overlay {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 100;
    top: 0%;
    left: 0%;
    background: rgba(28, 30, 37, 0.6);
    backdrop-filter: blur(6px);
}

.drag-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: $main-00;
    box-shadow: 0px 0px 32px 0px rgba(189, 184, 215, 0.4);
    padding: 20px;
    @include semibold-14-20;
    color: $primary-400;
    pointer-events: none;

    &-inner {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        border: 2px dashed $primary-400;
        background-color: $primary-50;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-content: center;

        .drag-area-title{
            text-align: center;

        }
        .drag-area-icon {
            display: flex;
            justify-content: center;
            svg {
                width: 24px;
                height: 24px;
                color: $main-900;
            }
        }
    }
}
</style>