建设网站招标,qq推广引流网站,在线编辑ppt的网站,加强网站建设的前言
众所周知#xff0c;在React中有一款非常强大的拖拽库#xff0c;叫React DnD#xff0c;而Vue中#xff0c;大部分都是类似于vue.draggable等拖拽排序的库#xff0c;然而它并不能满足我们所有的需求#xff0c;特别是应对一些自由拖拽或混合拖拽的场景(例如…前言
众所周知在React中有一款非常强大的拖拽库叫React DnD而Vue中大部分都是类似于vue.draggable等拖拽排序的库然而它并不能满足我们所有的需求特别是应对一些自由拖拽或混合拖拽的场景(例如低代码)它是很难做到的所以vue3-dnd它来了
React DnD
React DnD 是 Redux 核心作者 Dan Abramov 创造的一组 React 工具库可以帮助您构建复杂的拖放接口同时保持组件的解耦性。 React DnD 并没有提供一个排序或拖拽的组件相反它为您提供了所需的工具。
Vue3 DnD
vue3-dnd 是基于React DnD的核心程序实现的一组Vue composition-api它提供了尽量与React DnD保持一致的api便于我们去构建一个复杂、自由的拖拽功能。
安装
越来越多的人使用pnpm所以我们也推荐你使用pnpm来进行安装当然你也可以使用其它任意工具进行安装 pnpm install vue3-dnd react-dnd-html5-backend
# or
npm install vue3-dnd react-dnd-html5-backendreact-dnd-html5-backend 是一个React DnD 的插件它提供了一个HTML5的拖放支持你也可以使用react-dnd-touch-backend 提供移动端拖放支持。 得益于React DnD的优秀设计我们可以直接使用它提供的backend或者实现一个自己的backend还可以使用 react-dnd-test-backend 来测试你的拖拽组件。
概念
React DnD创造了一些新的概念如果第一次使用它的话我们可能要提前了解它。当然你也可以先跳过这一部分在你真正使用的时候再去了解它。
项目(Items) 和 类型(Types)
React DnD 使用数据而不是视图作为拖拽实施。当您在屏幕上拖动某些东西时我们不会说正在拖动组件或 DOM 节点。相反我们说正在拖动某种类型的项目。
监视器(Monitors)
拖放本质上是有状态的。拖动操作正在进行中或者没有。要么有当前类型和当前项目要么没有。这种状态必须存在于某个地方。 对于每个需要跟踪拖放状态的组件您可以定义一个收集函数从监视器中提取状态例如 const [collect, drop] useDrop({accept: Cell,collect: monitor ({canDrop: monitor.canDrop(),hovered: monitor.isOver(),}),
})连接器(Connectors)
连接器允许您将DOM元素连接到backend中预定义角色之一拖动源drag、拖动预览dragPreview或放置目标drop。 我们的hooks中提供了连接器函数让我们看看如何使用它来指定放置目标 script setup langts
import { useDrop } from vue3-dndconst [, drop] useDrop({})
/scripttemplatediv :refdrop/div
/template拖拽源(Drag Sources) 和 拖放目标 (Drop Targets)
我们使用拖拽源dragSource来表示拖拽的元素 我们使用拖放目标dropTarget来表示目标接收拖拽元素
使用
开始
在使用Vue3 DnD的时候我们一般需要使用DndProvider组件如果没有特殊情况我们可以将它放在App.vue里边 script setup langts
import { DndProvider } from vue3-dnd
import { HTML5Backend } from react-dnd-html5-backend
/scripttemplateDndProvider :backendHTML5Backend!-- 你的拖拽程序 --/DndProvider
/template拖拽组件
我们可以使用useDrag这个函数来构建一个拖拽组件。 script setup langts
import { useDrag } from vue3-dndconst [collectedProps, dragSource, dragPreview] useDrag({type: BOX,item: { id: 1 },collect: (monitor) ({ isDragging: monitor.isDragging() })
})
/scripttemplatediv v-ifcollectedProps.isDragging :refdragPreviewdragPreview/divdiv v-else :refdragSourcedragSource/div
/template可以看到简单的几行代码我们构建了一个拖拽的元素它平时展示dragSource而一旦开始拖拽它就会展示dragPreview。
拖放目标
我们可以使用useDrop这个函数来构建一个拖放组件。 script setup langts
import { useDrop } from vue3-dndconst [, drop] useDrop({accept: [BOX]
})
/scripttemplatediv :refdropDrop Target/div
/template上边的代码帮助我们构建了一个拖放组件它只会对type为BOX的拖拽元素产生反应。
拖动层
我们都知道在拖拽的过程中浏览器会给我们提供一个元素的快照但是我们如果想自己操作这个快照该怎么办呢这个时候就可以使用useDragLayer这个函数 script setup langts
import { useDragLayer } from vue3-dndconst collectedProps useDragLayer(monitor ({ item: monitor.getItem(),}))
/scripttemplatedivdragLayer/div
/template上边的例子就会让你在拖拽的过程中展示一个dragLayer元素一般我们会结合useDrag的dragPreview连接器进行使用。
效果
俗话说的好有图有真相没有实际的效果怎么能知道它的强大呢
自由拖拽自定义拖动层 拖拽排序 嵌套的拖拽元素 当然它还可以实现更多这里就不再一一展示了。
Vue2
别看它叫vue3-dnd它同样也可以支持vue2在vue2中只需要稍微更改一下使用方式即可。
在vue2中使用需要先安装vue/composition-api由于Vue2不支持dom ref函数所以我们必须额外定义一个ref用于承载dom节点并将这个ref传递给我们的connect函数。 templatedivrefelementroleBox:data-testidbox-${name}{{ name }}/div
/templatescript langts setup
import { useDrag } from vue3-dnd
import { ref } from vue/composition-apiinterface DropResult {name: string
}const props defineProps{ name: string }()const [collect, drag, dragPreview] useDrag(() ({type: BOX,item: { name: props.name },
}))const element ref()
drag(element)
// 可选的默认与drag一致
dragPreview(element)
// 如果是useDrop也是一样的
// drop(element)
/script结语
为什么不叫vue dnd呢当然是因为有人已经提前占用了这个包名~
同时我们还希望继续在vue3-dnd的上层提供一些易用性更高的组件欢迎大家一起参与敬请期待。
