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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
jnpfsoft13 小时前
别再瞎配低代码表单控件!功能 + 样式 + 多端适配,这篇讲透
低代码
流之云低代码平台1 天前
低代码开发,如何让企业应用搭建化繁为简?
低代码·低代码开发实现积木式搭建原理·低代码开发解决企业痛点·低代码搭建企业应用技巧·低代码平台选型考量·低代码开发的优势·gadmin
琴剑飘零西复东1 天前
低代码市场深度分析:数字化转型的加速器与挑战
低代码·1024程序员节
NocoBase2 天前
8 人团队如何效率拉满?——创联云的开发方法论
数据库·低代码·开源
一只小阿乐2 天前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
IT教程资源C2 天前
(N_156)基于springboot,vue小区物业管理系统
mysql·vue3·前后端分离·springboot小区物业
M0066882 天前
从拖拽到架构:低代码如何兼顾速度、灵活性与可控边界
低代码·数据可视化
AI智能架构工坊2 天前
提升AI虚拟健康系统开发效率:架构师推荐10款低代码开发平台
android·人工智能·低代码·ai
wenzhangli72 天前
零代码玩转OneCode 3.0表达式:LLM驱动的低代码扩展实战
低代码
AI规划师-南木2 天前
低代码开发医疗AI工具:5分钟搭建用药推荐系统,零基础也能落地
人工智能·深度学习·低代码·计算机视觉·推荐系统·rxjava·医疗ai