自研Vue3低代码海报制作平台第一步:基础拖拽组件开发

学习来源:稀土掘金 - 幽月之格大佬的技术专栏可拖拽、缩放、旋转组件 - 著作:可拖拽、缩放、旋转组件实现细节

非常感谢大佬!受益匪浅!

前面我们学习了很多vue3的知识,是时候把它们用起来做一个有意思的平台:低代码海报制作平台了。首先我们要实现基础的拖拽功能,这里非常感谢掘金优秀创作者幽月之格大佬,拜读您的可拖拽、缩放、旋转组件技术专栏让我跟着一步步的敲代码,站在大佬的肩膀上,参考下技术大牛是怎么实现的。学习别人的设计思想,当然代码也不是完全照搬,要有自己的思考。

文章目录

vitepress文档完善

为了演示拖拽的示例,和之前自研组件库开发一样,我们依然采用vitepress

基本实现

通过前面基本组件开发的tsx写法的学习,现在我们可以很轻松的开发出这样的结构:

基本拖拽的核心实现和掘金优秀创作者幽月之格的教程中实现的差不多,稍有区别的是这一块逻辑:

实现后的效果:

区域拖拽实现

核心实现需要基于开启区域拖拽的boundary来判断最大拖拽距离的逻辑:

注意,这里while循环来获取外层距离drag元素最近的相对父容器的逻辑以及边界判断逻辑。

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
蓝胖子的多啦A梦4 小时前
Vue3 (数组push数据报错) 解决Cannot read property ‘push‘ of null报错问题
前端·vue3·push·数组数据
NocoBase1 天前
NocoBase 本周更新汇总:增加工作流分类管理
低代码·开源·资讯
听说名字越长的就越牛逼1 天前
Mendix,在开发组件之前,需要了解的部分知识
前端·react.js·低代码
有梦想的攻城狮2 天前
从0开始学vue:vue3和vue2的关系
前端·javascript·vue.js·vue3·vue2
阿斯加德的IT2 天前
Power Automate: 从Excel 选择列,每200条生成一个CSV文件并保存在sharepoint文档库
低代码·excel
NocoBase2 天前
PostgreSQL 用户必看:6 款强大的无代码平台推荐
低代码·开源·资讯
kaixin_啊啊3 天前
手把手教你用Appsmith打造企业级低代码平台:从部署到性能调优实战
低代码
NocoBase3 天前
NocoBase v1.7.0 正式版发布
低代码·开源·资讯
马克凤梨3 天前
低代码平台中的设置器:让配置变得简单有趣
低代码
答案answer4 天前
Three.js实现低代码开发的两种模式
前端·低代码·three.js