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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
云鹤_10 小时前
【Amis源码阅读】低代码如何实现交互?(上)
前端·低代码
低代码布道师11 小时前
医疗小程序08科室管理
低代码·小程序
NocoBase15 小时前
两个商业插件改为开源插件
低代码·开源·资讯
道一云黑板报18 小时前
大规模低代码系统推荐:知识图谱与 GNN 的性能优化策略
深度学习·神经网络·低代码·性能优化·知识图谱·推荐算法
你说啥名字好呢20 小时前
【Vue 渲染流程揭秘】
前端·javascript·vue.js·vue3·源码分析
液态不合群1 天前
DDD驱动低代码开发:从业务流程到领域模型的全链路设计
前端·低代码·架构·ddd
jonyleek1 天前
JVS低代码开发中,如何创建自定义前端页面并接入到现有系统中,从创建到接入的全攻略
前端·低代码·前端框架·软件开发
安卓兼职framework应用工程师2 天前
android 15.0 Launcher3长按拖拽时,获取当前是哪一屏,获取当前多少个应用图标
android·拖拽·workspace·长按拖拽
中杯可乐多加冰2 天前
数据分析案例详解:基于smardaten实现智慧交通运营指标数据分析展示
人工智能·低代码·数据分析·交通物流·智慧交通·无代码·大屏端
得帆云低代码3 天前
低代码高频实践场景系列之一——EHS系统
低代码