Vue3 DnD

常见问题

用法

如何安装 Vue3 DnD？ 

npm install vue3-dnd react-dnd-html5-backend

copy success

如何使组件只能通过指定的小手柄拖拽？

将容器节点指定为dragPreview，但仅将拖动手柄设为dragSource。请参阅自定义拖动手柄示例。

如何限制拖拽移动的预览？

默认情况下，您无法约束拖动预览移动，因为拖动预览是由浏览器绘制的。但是，您可以使用自定义拖动层，您可以在其中自由渲染任何内容，包括任何捕捉或约束。

如何使单个元素既可以拖拽又可以放置？

useDrag和useDrop的连接器可以同时使用。例如：


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

const [, drag] = useDrag({})
const [, drop] = useDrop({})
</script>

<template>
  <div :ref="node => drag(drop(node))"></div>
</template>

copy success

如何拖放一个本机文件？

如果您使用的是HTML5 Backend ，则可以使用NativeTypes，给放置目标指定一个类型：


 



 










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

const [collect, drop] = useDrop(() => ({
	accept: [NativeTypes.FILE],
	drop(item: { files: any[] }) {
		console.log(item.files)
	}
}))
</script>

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

copy success

Could not find the drag and drop manager in the context

请检查你的组件是否使用DndProvider包裹。

useDrop的collect函数不能及时执行

请检查你传入的accept参数是否是一个常量或者是一个ref。 这个场景常见于：当accept参数是从props传入时，用户直接在vue的template或者render函数内写入一个引用类型的值，如下所示：


 


<template>
  <UseDrop :accept="['box']"></UseDrop>
</template>

copy success
<script>
export default {
  name: 'UseDrop',
}
</script>
<script setup lang="ts">
import { useDrop } from 'vue3-dnd'
const props = defineProps<{ accept: string[] }>()

const [collect, drop] = useDrop(() => ({
  // 这个时候会因为render函数的执行导致 accept 的引用发生改变，随后触发useDrop的一系列副作用，导致collect收集不成功
  accept: props.accept,
}))
</script>

copy success

解决方案


 


 


<template>
	<UseDrop :accept="accept"></UseDrop>
</template>
<script setup>
const accept = ['box']
</script>

copy success