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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
Jeking2178 小时前
低代码平台表单设计器 unione form editor 布局组件--卡片布局
低代码·动态表单·表单设计·表单引擎·unione cloud
Jeking2179 小时前
实战案例|用 unione form editor 搭建企业级用户注册表单,组件联动 + 标签布局一步到位
低代码·动态表单·表单设计·表单引擎·unione cloud
次元工程师!10 小时前
LangFlow开发(三)—Bundles组件架构设计(3W+字详细讲解)
java·前端·python·低代码·langflow
Jeking21718 小时前
低代码平台表单设计器 unione form editor 布局组件--栅格布局
低代码·动态表单·表单设计·表单引擎·unione cloud
卷叶小树18 小时前
低代码 Runtime Lifecycle:逻辑执行时机
低代码
Jeking2171 天前
低代码平台表单设计器unione form editor组件介绍--多行输入组件
低代码·动态表单·表单设计·表单引擎·unione cloud
Jeking2172 天前
低代码平台表单设计器 unione form editor 布局组件--标签布局
低代码·动态表单·表单设计·表单引擎·unione cloud
一切皆是因缘际会2 天前
AI低代码开发实战:轻量化部署与多场景落地
人工智能·深度学习·低代码·机器学习·ai·架构
踩着两条虫2 天前
可视化设计器组件系统:从交互核心到 AI 智能代理的落地实践
开发语言·前端·人工智能·低代码·设计模式·架构
想你依然心痛3 天前
HarmonyOS 6(API 23)实战:基于悬浮导航、沉浸光感与HMAF的“智流工坊“——低代码可视化智能体编排平台
低代码·华为·harmonyos