之前一直在研究可视化和零代码搭建相关产品和技术, 最近逛 github 的时候发现一个比较有意思的拖拽开源组件, 就用 vue3 简单撸了一个拖拽搭建的小demo, 供大家参考学习.

可视化拖拽demo项目介绍

空闲时间简单设计了几个功能, 如下:

• 支持设置拖拽单位(阈值)
• 支持撤销重做
• 支持导入和导出 json
• 支持组件全选 / 组合
• 技提供了常用的四个基础组件(文本, 图片, 音频, 视频)

因为之前我的技术栈主要是react, 为了让更多小伙伴低成本的上手, 这里项目采用大家比较熟悉的vue3 + vite.

项目采用的拖拽开源库 es-drager, 当然为了更好的显示代码, 也使用了 monaco-editor,  如下是它的代码展示效果:

图片

整体来说展示效果还是不错的, 为开源作者们点赞.

完整项目仓库地址: https://github.com/MrXujiang/vue3-drag-demo

线上演示地址: drag_demo 可视化拖拽

一些技术实现的介绍

上面的demo主要实现思路拆解如下:

• 实现组件从左侧面板拖拽到画布
• 组件在画布中的移动, 操作(全选, 拉伸, 旋转, 参考线等)
• 组件属性的配置
• 可视化的相关操作(导入, 导出, 撤销, 重做等)

1.实现组件从左侧面板拖拽到画布

这里实现也很简单, 我们采用H5的原生api: drag & drop 来实现. 也就是说从左侧面板拖拽到画布, 本质上是数据的移动.

图片

我们先定义好左侧面板的组件类型:

const typeList = reactive(['文本', '图片', '音频', '视频'])