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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
微刻时光5 小时前
影刀RPA中级证书-Excel进阶-开票清单
经验分享·python·低代码·rpa·影刀·影刀证书·影刀实战
zhuyasen1 天前
告别低效!Go 开发框架 Sponge 与 AI 助手深度联动,打造极速开发新体验
低代码·go·deepseek
低代码布道师1 天前
性格测评小程序10生成报告
低代码·小程序
有颜有货1 天前
低代码技术在医院的应用与思考
低代码
thubier(段新建)1 天前
低代码与开发框架的一些整合[2]
低代码
wenzhangli71 天前
DeepSeek 对低代码产品的影响:机遇、挑战与未来展望
低代码
OK_boom3 天前
AStar低代码平台RpcServiceBase的应用:客户端事务管理
低代码
字节颤抖3 天前
vite+vue3开发uni-app时低版本浏览器不支持es6语法的问题排坑笔记
前端·uni-app·es6·vue3·vite·babel·兼容
这我可不懂4 天前
Vue.js 与低代码开发:在制造业中的创新应用
前端·vue.js·低代码
露临霜4 天前
低代码产品中插件的理解
低代码