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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
IT研究所1 小时前
AI-ITR平台如何减少客户问题反复升级?
大数据·运维·人工智能·低代码·自然语言处理·安全架构·企微
guslegend5 小时前
需求分析和架构设计:做什么,如何做
低代码·需求分析·架构设计·ssr·前端架构
三号路口8 小时前
低代码平台的扩展机制:插件化架构怎么设计
低代码
百数平台11 小时前
百数照片知识库配置指南:图片上传、OCR 识别与智能 / 人工标注全流程说明
低代码·ai·ocr
百数平台11 小时前
百数表单知识库配置指南:对接低代码业务表单、字段自动映射与实时同步全说明
低代码·ai
百数平台21 小时前
百数AI智能体基础开发流程:从创建、设计、发布到表单自动回填(含JSON输出与apaas配置)
低代码
百数平台1 天前
百数AI文本知识库配置详解:本地文档上传与自定义录入、解析分段策略全说明
低代码·ai
百数平台1 天前
百数AI对话流(Chatflow)开发指南:会话历史配置、角色面板、开场白预置问题与智能体挂载
低代码·ai
格数致用2 天前
03- Luckysheet与Vue3+Electron集成实战指南
electron·vue3·luckysheet
驰骋工作流2 天前
从一次“发起工程“走完调用链:CCFlow CCPrj 工程管理源码导读驰骋BPM驰骋低代码低代码工作流引擎
低代码