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

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

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

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

文章目录

vitepress文档完善

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

基本实现

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

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

实现后的效果:

区域拖拽实现

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

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

测试边界拖拽

相对内层容器:

效果:

再相对外层容器:

效果:

相关推荐
只会cv的小前端2 天前
七巧低代码表单JS脚本教学
开发语言·javascript·低代码
踩着两条虫3 天前
VTJ.PRO AI Agent 技术白皮书
前端·vue.js·低代码
只会cv的小前端4 天前
七巧低代码服务端脚本使用方法
android·低代码·rxjava
iori97king5 天前
织信开发日志 03:表单引擎从 0 到 1 的设计过程
低代码
工业甲酰苯胺6 天前
数字化转型困在规划里?AI+低代码解锁业务落地新路径
大数据·数据库·人工智能·低代码
java1234_小锋6 天前
Vue3专题 - 响应式基础
vue·vue3·响应式
春波petal8 天前
Vue3防抖搜索:从Lodash到customRef全解析
vue.js·vue3·防抖搜索
濮水大叔9 天前
不必把 Vue3 写成“麻花”:从状态碎片到对象协作,重新理解 Zova 的前端心智模型
前端·typescript·vue3·ioc·tsx·zova
#六脉神剑9 天前
前端一站式文件预览方案:open-file-viewer 完整测评与myBuilder落地实践
前端·低代码·开发平台·mybuilder
听风34710 天前
智扫通机器人智能客服系统
vue3·fastapi·智能客服·agent项目