Vue3 DnD

useDrop

useDrop函数提供了一种将你的组件作为放置目标连接到 DnD 的方法。它接收一个Specification，你可以通过accpet指定允许放置的类型，通过item表示拖动源的数据，通过collect获取拖拽状态等等。

useDrop返回了两个值：collect函数的返回值，dropTarget的连接器函数。

<script setup lang="ts">
import { useDrop } from 'vue3-dnd'

const [collectedProps, drop] = useDrop(() => ({
	accept: ['BOX']
}))
</script>

<template>
  <div :ref="drop">Drop Target</div>
</template>

copy success

参数

useDrop的参数可以是一个Specification对象，也可以是一个函数，返回一个Specification对象，有关Specification的详细信息，请参考Specification。

返回值

useDrop返回一个数组，包含两个值：collect函数的返回值，dropTarget的连接器函数

  • [0] - Collected Props

    • Ref<object>

      copy success
    • 它是一个Ref对象，它的value指向collect函数的返回值，如果没有定义collect函数，它的value就是一个空对象

  • [1] - DragTarget Connector

    • Ref<(el: Ref<HTMLElement> | HTMLElement) => HTMLElement>

      copy success
    • 放置目标的连接器函数。它必须被调用，并且传入一个 Ref<HTMLElement> | HTMLElement的可被拖放 DOM 元素；
    • 第二个参数是一个options对象，与Specification对象的options一致

Specification 对象

在了解Specification对象的基本用法之前，你可能需要先了解一下DropTargetMonitor对象。

Key必填类型说明
accept是string | symbol | string[] | symbol[]此放置目标只会对指定类型的拖动源做出反应。
collect否(monitor: DropTargetMonitor) => CollectedProps一个收集器的函数。它应该返回一个普通对象并成为useDrop返回值中的第一个项。
options否object目前没什么用。
drop否(item: object, monitor: DropTargetMonitor) => (void | Record<string, any>)当拖拽元素放置在目标上时调用。
你可以不返回任何东西，也可以返回一个普通对象。
如果你返回了一个对象，它将成为dropResult,并且在drag的end方法中，可以通过monitor.getDropResult()获取到它。如果你想根据不同的放置目标执行不同的操作，这将是一个不错的选择。
如果你的放置目标是嵌套的，那你可以通过monitor.didDrop()和monitor.getDropResult()来检查嵌套目标是否已经处理。
这个方法和drag的end方法，都是处理数据变化的好地方。如果canDrop()方法返回false，则不会调用此方法。
hover否(item: object, monitor: DropTargetMonitor) => void 当拖拽组件经过组件上时调用该方法。
你可以通过检查monitor.isOver({ shallow: true })来检查悬停是仅发生在当前目标上还是发生在内部的嵌套目标上。
和drop()方法不同的是：即使canDrop()返回了false，该方法也会被调用。
你可以通过monitor.canDrop()来确认并避免这种情况。
canDrop否(item: DragObject, monitor: DropTargetMonitor<DragObject, DropResult>) => boolean用于指定放置目标是否能够接受此拖拽组件。
如果你希望总是允许，请忽略该方法。
如果你想基于 props或monitor.getItem()中的某些断言禁用放置，就可以使用它。
注意：你不能在这个方法中调用 monitor.canDrop()。