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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
Cherry的跨界思维18 小时前
【AI测试全栈:Vue核心】19、Vue3+ECharts实战:构建AI测试可视化仪表盘全攻略
前端·人工智能·python·echarts·vue3·ai全栈·ai测试全栈
启扶农21 小时前
lecen:一个更好的开源可视化系统搭建项目--表格、列表--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
低代码·表格组件·列表组件·页面可视化·页面设计器·表格配置·列表配置
Zoey的笔记本2 天前
安全、可控、可定制:构建企业级知识库,开源在线协作文档的深度应用
java·python·低代码
液态不合群2 天前
【教育数字化】破除“技术空转”困局:低代码如何重构教育系统建设逻辑?
低代码·重构
yinmaisoft2 天前
JNPF 权限管理 yyds!菜单 / 流程 / 打印权限一键配,层级授权不头疼
前端·人工智能·低代码·开发工具
无代码专家2 天前
无代码赋能全域数字化:从痛点突破到效能重构
低代码
启扶农2 天前
lecen:一个更好的开源可视化系统搭建项目--人员管理、身份管理--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
低代码·权限管理·身份管理·组织管理·页面可视化·页面设计器·人员管理
Lubase2 天前
LuBase介绍&私有化部署教程
java·spring boot·低代码·gitee·vue
ZKNOW甄知科技3 天前
2025 甄知科技年度报告
运维·人工智能·低代码·ci/cd·自动化·数据库架构·敏捷流程
Lubase3 天前
国企管理系统低代码选型注意事项
低代码