feat: update drag drop ref function

lib/hooks/useDrag/useDrag.ts

@@ -17,14 +17,15 @@ export function useDrag<
 	DragObject = unknown,
 	DropResult = unknown,
 	CollectedProps = unknown,
+	ConnectDragSourceOptions = unknown,
 	ConnectDragPreviewOption = unknown
 >(
 	specArg: FactoryOrInstance<
 		DragSourceHookSpec<DragObject, DropResult, CollectedProps>
 	>
 ): [
 	Ref<CollectedProps>,
-	Ref<ConnectDragSource>,
+	Ref<ConnectDragSource<ConnectDragSourceOptions>>,
 	Ref<ConnectDragPreview<ConnectDragPreviewOption>>
 ] {
 	const spec = useOptionalFactory(specArg)

lib/hooks/useDrop/useDrop.ts

@@ -15,12 +15,13 @@ import { computed, Ref, unref } from 'vue'
 export function useDrop<
 	DragObject = unknown,
 	DropResult = unknown,
-	CollectedProps = unknown
+	CollectedProps = unknown,
+	ConnectDropTargetOptions = unknown
 >(
 	specArg: FactoryOrInstance<
 		DropTargetHookSpec<DragObject, DropResult, CollectedProps>
 	>
-): [Ref<CollectedProps>, Ref<ConnectDropTarget>] {
+): [Ref<CollectedProps>, Ref<ConnectDropTarget<ConnectDropTargetOptions>>] {
 	const spec = useOptionalFactory(specArg)
 	const monitor = useDropTargetMonitor<DragObject, DropResult>()
 	const connector = useDropTargetConnector(computed(() => unref(spec).options))

lib/types/connectors.ts

@@ -1,10 +1,10 @@
-import { ComponentPublicInstance, VNode } from 'vue'
+export type ConnectableElement = Element | null
 
-export type ConnectableElement = Element | ComponentPublicInstance | null
-
-export type ConnectDragSource = ConnectableElement
-export type ConnectDropTarget = ConnectableElement
-export type ConnectDragPreview<Options> = (
+type ConnectNode<Options> = (
 	elementOrNode: ConnectableElement,
 	options?: Options
-) => VNode
+) => Element
+
+export type ConnectDragSource<Options> = ConnectNode<Options>
+export type ConnectDropTarget<Options> = ConnectNode<Options>
+export type ConnectDragPreview<Options> = ConnectNode<Options>

src/views/Box.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{ title: string }>()
+
+const el = ref()
+defineExpose({
+	el,
+})
+</script>
+
+<template>
+	<div ref="el" class="box">
+		{{ title }}
+	</div>
+</template>

src/views/Example.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useDrag, useDrop } from 'vue3-dnd'
 import { computed, unref } from 'vue'
+import Box from './Box.vue'
 
 const [dropCollect, drop] = useDrop(() => ({
 	accept: 'Box',
@@ -36,6 +37,10 @@ const [collect, drag] = useDrag(() => ({
 const isDragging = computed(() => collect.value.isDragging)
 
 const opacity = computed(() => (unref(isDragging) ? 0.4 : 1))
+
+const setRef = (instance: any) => {
+	drag.value(instance.el)
+}
 </script>
 
 <template>
@@ -51,7 +56,14 @@ const opacity = computed(() => (unref(isDragging) ? 0.4 : 1))
 			</div>
 		</div>
 		<div :style="{ overflow: 'hidden', clear: 'both' }">
-			<div :ref="drag" class="box" role="Box" :style="{ opacity }">Box</div>
+			<Box
+				:ref="setRef"
+				class="box"
+				role="Box"
+				:style="{ opacity }"
+				title="Box"
+			></Box>
+			<!--			<div :ref="drag" class="box" role="Box" :style="{ opacity }">Box</div>-->
 		</div>
 	</div>
 </template>