Composition API #

<script setup lang="ts">
import { useDrag } from 'vue3-dnd'
import { toRefs } from "@vueuse/core";

const [collect, drag, dragPreview] = useDrag(() => ({
	// “type”是必需的。它由放置目标的“accept”使用。
	type: 'BOX',
	// collect 函数传入一个“监视器”实例，用于从 DnD 中获取需要的状态信息。
	collect: (monitor) => ({
		isDragging: monitor.isDragging()
	})
}))
// collect是一个Ref对象，默认取值需要从collect.value中获取,
// 可以使用toRefs将Ref对象转换为可解构的对象
const { isDragging } = toRefs(collect)
</script>

<template>
	<!-- 这是可选的。默认情况下，dragPreview 将附加到 dragSource -->
	<div :ref="dragPreview" :style="{ opacity: isDragging ? 0.5 : 1 }">
		<div role="Handle" :ref="drag"/>
	</div>
</template>
copy success
copy

<script setup lang="ts">
import {useDrop} from 'vue3-dnd'
import {toRefs} from '@vueuse/core'

const [collect, drop] = useDrop(() => ({
	// 允许放置的type(string|symbol)，或者types
	accept: 'BOX',
	// 传递个collect的数据
	collect: monitor => ({
		isOver: monitor.isOver(),
		canDrop: monitor.canDrop(),
	}),
}))
const {canDrop, isOver} = toRefs(collect)
</script>

<template>
	<div :ref="drop" :style="{ backgroundColor: isOver ? 'red' : 'white' }">
		{{ canDrop ? 'Release to drop' : 'Drag a box here' }}
	</div>
</template>
copy success
copy