常见问题
用法
如何安装 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