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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
低代码布道师6 小时前
教培管家第11讲:班级管理——教务系统的“集成枢纽”
低代码·小程序·云开发
加加今天也要加油8 小时前
Oinone × AI Agent 落地指南:元数据即 Prompt、BPM 状态机护栏、SAGA 补偿、GenUI
人工智能·低代码·prompt
启效云9 小时前
【技术赋能实战】焱蓝智益科技:如何用物联网+自组网打通消防应急通信“最后一公里”?
科技·物联网·低代码·软件开发·低代码开发
无法长大10 小时前
Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南
android·前端·macos·rust·vue3·tauri·打包apk
淡笑沐白1 天前
Vue3使用ElementPlus实现菜单的无限递归
javascript·vue3·elementplus
云捷配低代码1 天前
新零售行业低代码平台应用实践
低代码·自动化·需求分析·零售·数字化·数字化转型
Sapphire~1 天前
Vue3-18 生命周期(vue2+vue3)
vue3
得帆云1 天前
低代码高频实践场景系列之九——智能报价管理体系如何构建
低代码