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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
Jeking21719 小时前
进阶流程图绘制工具 Unione Flow Editor-- 巧用Event事件机制,破解复杂业务交互难题
流程图·vue3·workflow·unione flow·flow editor·unione cloud
OpenTiny社区1 天前
2025OpenTiny星光ShowTime!年度贡献者征集启动!
前端·vue.js·低代码
一只小阿乐1 天前
前端vue3 web端中实现拖拽功能实现列表排序
前端·vue.js·elementui·vue3·前端拖拽
AAA阿giao1 天前
从“操纵绳子“到“指挥木偶“:Vue3 Composition API 如何彻底改变前端开发范式
开发语言·前端·javascript·vue.js·前端框架·vue3·compositionapi
૮・ﻌ・2 天前
Vue3:组合式API、Vue3.3新特性、Pinia
前端·javascript·vue3
重铸码农荣光2 天前
用AI把猫主子变成冰球猛将?我搞了个“宠物拟人化”神器,结果……它真敢打!
vue.js·低代码·coze
yinmaisoft2 天前
JNPF 钉钉双向同步攻略:组织 / 用户一键打通,触发事件自动联动
前端·低代码·钉钉
hh.h.2 天前
低代码平台重构:Flutter组件库与鸿蒙分布式能力融合实践
flutter·低代码·重构
数式Oinone2 天前
数式Oinone受邀AtomGit开放原子校源行,拆解开源生态下产品化AI融合方案
低代码·开放原子·低代码平台·gitcode·数式oinone