Vue.draggable拖拽至组件外div的检测方法咨询

我正在开发一个看板任务查看器，看板里有多个带日期的任务，支持拖拽到分组内。现在有一个位于draggable组件外部的div，我想实现将任务项拖拽到这个div时能被检测到，请问有没有可行的实现方式？

想要实现的效果：

现有代码 #

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>

可行实现方式 #

方法一：利用原生HTML5拖拽事件 #

由于你已经开启了forceFallback="true"（强制使用原生拖拽模拟），可以直接给外部的dropZone绑定原生拖拽事件：

1. 在MainTasks.vue的<script setup>中添加逻辑：

import { ref, onMounted } from 'vue'
const dropZone = ref(null)

onMounted(() => {
    const zone = dropZone.value
    // 阻止默认行为，否则无法触发drop事件
    zone.addEventListener('dragover', (e) => {
        e.preventDefault()
        // 拖拽进入时添加激活样式
        zone.classList.add('drop-active')
    })

    zone.addEventListener('dragleave', () => {
        // 拖拽离开时移除激活样式
        zone.classList.remove('drop-active')
    })

    zone.addEventListener('drop', (e) => {
        e.preventDefault()
        zone.classList.remove('drop-active')
        // 获取拖拽的任务数据
        const taskData = JSON.parse(e.dataTransfer.getData('text'))
        // 这里处理任务拖拽到该区域后的业务逻辑，比如修改日期、移动分组等
        console.log('拖拽到外部区域的任务：', taskData)
    })
})

2. 在DraggableCard.vue中给task-card添加dragstart事件传递任务数据：
   修改task-card模板：

<task-card 
    :key="`${keyValue}${index}`" 
    :key-value="index" 
    :task="element" 
    :tasklistid="list.id"
    class="mt-3 cursor-move relative child-lines"
    @dragstart="handleDragStart(element)"
></task-card>

添加对应方法：

const handleDragStart = (task) => {
    // 将任务数据转为JSON字符串存入dataTransfer
    event.dataTransfer.setData('text', JSON.stringify(task))
}

方法二：全局监听拖拽事件 #

通过监听文档级别的拖拽事件，判断是否拖拽到目标区域：

1. 在MainTasks.vue的<script setup>中添加：

import { onMounted } from 'vue'

onMounted(() => {
    document.addEventListener('dragover', (e) => {
        const dropZone = document.getElementById('droptarget')
        if (dropZone && dropZone.contains(e.target)) {
            e.preventDefault()
            dropZone.classList.add('drop-active')
        }
    })

    document.addEventListener('drop', (e) => {
        const dropZone = document.getElementById('droptarget')
        if (dropZone && dropZone.contains(e.target)) {
            e.preventDefault()
            dropZone.classList.remove('drop-active')
            // 获取任务数据（需在dragstart时存入）
            const taskData = JSON.parse(e.dataTransfer.getData('text'))
            // 处理业务逻辑
            console.log('任务已拖拽到目标区域：', taskData)
        }
    })
})

同样需要在DraggableCard.vue的task-card上添加dragstart事件传递数据，与方法一一致。

补充交互样式 #

给drop-zone添加激活状态样式，增强用户反馈：

.drop-active {
    outline-color: #2563eb;
    background-color: #eff6ff;
}

内容的提问来源于stack exchange，提问作者Vishnu Gopinath