Vue3 Dnd实战案例：从简单拖拽到复杂排序组件的完整指南

Vue3 Dnd实战案例从简单拖拽到复杂排序组件的完整指南【免费下载链接】vue3-dndReact Dnd implementation in Vue Composition-api.项目地址: https://gitcode.com/gh_mirrors/vu/vue3-dndVue3 Dnd是基于Vue Composition API实现的React Dnd移植版本为Vue3应用提供强大且灵活的拖拽功能支持。本文将通过多个实战案例从基础拖拽到高级排序组件帮助你快速掌握Vue3 Dnd的核心用法与最佳实践。 快速开始安装与基础配置环境准备首先确保你的项目已使用Vue3通过以下命令安装Vue3 Dndnpm install vue3-dnd # 或使用yarn yarn add vue3-dnd基础结构每个Vue3 Dnd应用都需要DndProvider作为根容器建议在main.ts中全局配置import { createApp } from vue import { DndProvider } from vue3-dnd import App from ./App.vue createApp(App) .component(DndProvider, DndProvider) .mount(#app)在组件中使用时只需将拖拽区域包裹在DndProvider中即可template DndProvider !-- 拖拽相关组件 -- /DndProvider /template 核心概念理解拖拽三要素Vue3 Dnd基于三个核心概念构建它们共同构成了拖拽功能的基础1. 拖拽源 (Drag Source)使用useDrag钩子定义可拖拽元素示例代码位于src/hooks/useDrag/useDrag.ts。基础用法const { drag, isDragging } useDrag({ type: BOX, // 拖拽类型字符串或Symbol item: () ({ id: box-1 }), // 拖拽数据 collect: (monitor) ({ isDragging: monitor.isDragging() }) })2. 放置目标 (Drop Target)使用useDrop钩子定义可接收拖拽元素的区域实现代码可见src/hooks/useDrop/useDrop.tsconst { drop } useDrop({ accept: BOX, // 接受的拖拽类型 drop: (item) { console.log(放置了:, item) }, collect: (monitor) ({ isOver: monitor.isOver() }) })3. 拖拽层 (Drag Layer)通过useDragLayer钩子创建自定义拖拽预览绕过浏览器默认样式限制详细实现见src/hooks/useDragLayer.ts。 实战案例一简单垃圾桶拖拽功能描述实现可拖拽的盒子元素将其拖入垃圾桶区域后删除基础示例代码位于packages/docs/src/example/dustbin/single-target.md。实现步骤定义拖拽类型创建ItemTypes.ts定义拖拽类型常量// src/components/single-target/ItemTypes.ts export const ItemTypes { BOX: box }创建可拖拽盒子组件使用useDrag钩子使元素可拖拽!-- src/components/single-target/Box.vue -- template div refdragRef :style{ opacity: isDragging ? 0.5 : 1, cursor: move } 可拖拽盒子 /div /template script setup langts import { useDrag } from vue3-dnd import { ItemTypes } from ./ItemTypes const props defineProps{ id: string }() const dragRef refHTMLElement | null(null) const { drag, isDragging } useDrag({ type: ItemTypes.BOX, item: () ({ id: props.id }), collect: (monitor) ({ isDragging: monitor.isDragging() }) }) drag(dragRef) /script创建垃圾桶组件使用useDrop钩子接收拖拽元素!-- src/components/single-target/Dustbin.vue -- template div refdropRef :style{ border: isOver ? 2px dashed red : 2px solid #ccc, minHeight: 100px, padding: 10px } 垃圾桶 {{ isOver ? 准备接收 : 等待拖拽 }} /div /template script setup langts import { useDrop } from vue3-dnd import { ItemTypes } from ./ItemTypes const emit defineEmits{ (e: delete, id: string): void }() const dropRef refHTMLElement | null(null) const { drop, isOver } useDrop({ accept: ItemTypes.BOX, drop: (item) { emit(delete, item.id) }, collect: (monitor) ({ isOver: monitor.isOver() }) }) drop(dropRef) /script组合使用组件在容器中管理盒子状态!-- src/components/single-target/Container.vue -- template div div classboxes Box v-forbox in boxes :keybox.id :idbox.id / /div Dustbin deletehandleDelete / /div /template script setup langts import { ref } from vue import Box from ./Box.vue import Dustbin from ./Dustbin.vue const boxes ref([ { id: box-1 }, { id: box-2 }, { id: box-3 } ]) const handleDelete (id: string) { boxes.value boxes.value.filter(box box.id ! id) } /script 实战案例二实现可排序列表功能描述创建支持拖拽排序的列表组件用户可通过拖拽调整项目顺序完整示例参考packages/docs/src/example/sortable/simple.md。实现要点使用拖拽源与放置目标组合每个列表项既是拖拽源也是放置目标位置交换逻辑在放置时计算新位置并更新列表顺序// 核心排序逻辑 const handleDrop (draggedId: string, targetId: string) { const draggedIndex items.value.findIndex(item item.id draggedId) const targetIndex items.value.findIndex(item item.id targetId) // 创建新数组避免直接修改原数组 const newItems [...items.value] // 移除拖动项 const [draggedItem] newItems.splice(draggedIndex, 1) // 插入到目标位置 newItems.splice(targetIndex, 0, draggedItem) items.value newItems }拖拽指示器添加视觉提示指示放置位置增强用户体验!-- 拖拽指示器组件 -- template div v-ifisDragging classdrag-indicator :style{ top: ${position}px } / /template 高级特性与最佳实践自定义拖拽预览默认情况下浏览器会创建元素截图作为拖拽预览。通过dragPreview连接器可自定义预览内容const { drag, dragPreview } useDrag({ // ...其他配置 }) // 使用单独的元素作为拖拽预览 drag(dragSourceRef) dragPreview(previewRef)更高级的自定义预览可使用DragPreviewImage组件或自定义拖拽层详见src/guide/components/drag-preview-image.md。拖拽手柄有时我们希望只有元素的特定部分可触发拖拽可通过拖拽手柄实现template div classitem div refdragHandle classdrag-handle☰/div div classcontent{{ item.content }}/div /div /template script setup langts const dragHandle refHTMLElement | null(null) const { drag } useDrag({ /* ... */ }) // 只将手柄设为拖拽源 drag(dragHandle) /script完整示例可参考自定义拖动手柄示例。性能优化对于大量元素的拖拽场景如100项的排序列表建议使用memo缓存collect函数返回值对拖拽源使用arePropsEqual优化重渲染考虑虚拟滚动列表仅渲染可见项性能测试示例可见packages/docs/src/example/sortable/stress-test.md。 学习资源与文档官方文档项目提供了完整的API文档和使用指南位于packages/docs/src/guide/示例代码所有示例的源代码可在packages/docs/src/.vitepress/examples目录找到核心APIuseDragsrc/hooks/useDrag/useDrag.tsuseDropsrc/hooks/useDrop/useDrop.tsuseDragLayersrc/hooks/useDragLayer.ts 从Vue2迁移如果你的项目正在从Vue2迁移到Vue3可参考Vue2迁移指南其中详细说明了Vue3 Dnd与vue-dnd2的差异及迁移步骤。 结语Vue3 Dnd通过Composition API提供了灵活且强大的拖拽功能从简单的元素拖拽到复杂的排序组件都能轻松应对。掌握本文介绍的核心概念和实战案例后你可以开始在项目中实现各种拖拽交互功能。记得查看项目中的完整示例和API文档以便更深入地了解Vue3 Dnd的全部功能。祝你在Vue3拖拽开发之路上一帆风顺【免费下载链接】vue3-dndReact Dnd implementation in Vue Composition-api.项目地址: https://gitcode.com/gh_mirrors/vu/vue3-dnd创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考