Drag and Drop Outside to a div

[vishnug-bridge]

Hi, I am creating a Kanban board task viewer. In this kanban, I have many tasks and a date. I can drag and drop this into a group. I have a div outside of the draggable component. When I drag a task item to this div, I want to detect it. Is there any way to detect it?

This is what I am trying to achieve.

//MainTasks.vue

<template>
    <div class="min-h-screen py-12 gap-y-6 gap-x-4 grid "
        :class="appstore.view == 'kanban' ? 'grid-cols-2 md:grid-cols-4' : 'grid-cols-1'">
        <div v-for="(task, key) in tasks" :key="key" class="bg-[#F2F4F7] px-3 py-3 rounded-lg">
            <div class="flex justify-between items-center">
                <p class="texlist-groupt-gray-700 font-semibold font-sans tracking-wide text-md">{{ task.taskList.title }}
                </p>
            </div>

            <DraggableCard :list="task?.tasks" :key-value="key"
                :class="appstore.view == 'kanban' ? 'min-h-[400px]' : 'min-h-[100px]'" />

        </div>
    </div>
    <div id="droptarget" ref="dropZone" class="shadow-md w-[300px] left-1/2 fixed bottom-[25px] bg-white translate-x-[-50%] rounded-[25px] justify-center outline-dashed outline-2 outline-sky-700 p-3 gap-x-3 flex items-center drop-zone">
        <div class="pr-3 border-r-2 border-dashed border-r-sky-700">Todo Today</div>
        <div>Todo This Week</div>
    </div>
</template>

//DraggableCard.vue

<template>
    <draggable :modelValue="list" @update:modelValue="list = $event" class="list-group space-y-3" drag-class="drag"
        group="cards" item-key="id" animation="200" forceFallback="true" ghost-class="ghost" tag="ul">
        <template #item="{ element, index }">
            <task-card :key="`${keyValue}${index}`" :key-value="index" :task="element" :tasklistid="list.id"
                class="mt-3 cursor-move relative child-lines"></task-card>
        </template>
    </draggable>

</template>
<script setup>
import draggable from "vuedraggable";
const props = defineProps(['list', 'keyValue'])

</script>

[owen-m1]

You need to make a custom event on the drop target that is separate from Sortable. Since you're using a fallback you can set a flag that sortable is dragging from onStart, and listen to mouseup on the target.

[vishnug-bridge]

flag that sortable is dragging from onStart, and listen to mouseup on the target.

I didn't get this point.