用第三方拖拽库快速撸一个可视化搭建平台

文章介绍了作者基于Vue3和Vite简单制作的一个可视化拖拽搭建的小demo，旨在为感兴趣的人提供学习和参考。这个项目利用了开源拖拽库es-drager，并集成了monaco-editor以优化代码显示效果。作者提供了完整的项目仓库地址和线上演示链接。

可视化拖拽demo项目介绍

该demo具备以下功能：

• 设置拖拽单位(阈值)
• 撤销和重做操作
• 导入和导出JSON格式的数据
• 支持组件全选和组合操作
• 提供文本、图片、音频、视频四种基础组件

项目采用了Vue3和Vite，以便于更多开发者能够低成本上手。

一些技术实现的介绍

作者之前已在社区和公众号分享了低代码技术的实现原理，本次demo主要包括以下实现思路：

1. 实现组件从左侧面板拖拽到画布上。
2. 支持画布中组件的移动和操作。
3. 允许配置组件属性。
4. 实现可视化操作如导入导出、撤销重做等。

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

利用HTML5原生API drag & drop实现数据移动，通过定义组件类型和设置拖拽事件，使得组件能够被拖拽到画布的指定位置。

2. 支持组件全选 / 组合

通过捕获全选区域坐标，过滤区域内组件，并批量更新数组中每个选中元素的选中状态实现全选和组合操作。

其他功能如撤销重做、导入导出等，代码已在GitHub仓库提供。作者认识到项目有待改进，并欢迎社区共建。同时，作者也鼓励其他开发者通过《趣谈前端》公众号分享自己的项目。

文章最后，作者承诺将持续迭代分享Dooring可视化和低代码的最佳实践，并邀请感兴趣的人进行交流。