热门标签
热门文章
- 1leetcode刷题：链表07 （环形链表 II）
- 2华硕主板更改UEFI安全启动项_next,you will enter the uefi
- 3其实python真的很简单！今天就教会你，用Python画哆啦A梦、海绵宝宝、皮卡丘、史迪仔！附上源码，不信你还学不会！_python画海绵宝宝
- 4实践分享：基于DevOps流程的容器安全看板
- 5ubuntu18.04 安装ros+mavros等_ros mavros
- 6Oracle 12c rac搭建_oracle12crac安装教程
- 7实用篇--SpringBoot整合Netty实现消息推送服务器_springboot+netty消息推送
- 8MySQL —— 表的设计_数据库表设计
- 9Stable Diffusion 3 开源发布可下载体验_stable diffusion v3 github
- 10世界排名前十的自动驾驶公司，这几家中国公司上榜_自动驾驶公司排名国内
当前位置: article > 正文
自研Vue3低代码海报制作平台第一步：基础拖拽组件开发_vue3 低代码拖拽设计器实现
作者：寸_铁 | 2024-08-17 00:26:51
赞
踩
vue3 低代码拖拽设计器实现
学习来源：稀土掘金 - 幽月之格大佬的技术专栏可拖拽、缩放、旋转组件 - 著作：可拖拽、缩放、旋转组件实现细节
非常感谢大佬！受益匪浅！
前面我们学习了很多vue3的知识，是时候把它们用起来做一个有意思的平台：低代码海报制作平台了。首先我们要实现基础的拖拽功能，这里非常感谢掘金优秀创作者幽月之格大佬，拜读您的可拖拽、缩放、旋转组件技术专栏让我跟着一步步的敲代码，站在大佬的肩膀上，参考下技术大牛是怎么实现的。学习别人的设计思想，当然代码也不是完全照搬，要有自己的思考。
vitepress文档完善
为了演示拖拽的示例，和之前自研组件库开发一样，我们依然采用vitepress：
基本实现
通过前面基本组件开发的tsx写法的学习，现在我们可以很轻松的开发出这样的结构：
基本拖拽的核心实现和掘金优秀创作者幽月之格的教程中实现的差不多，稍有区别的是这一块逻辑：
实现后的效果：
区域拖拽实现
核心实现需要基于开启区域拖拽的boundary来判断最大拖拽距离的逻辑：
注意，这里while循环来获取外层距离drag元素最近的相对父容器的逻辑以及边界判断逻辑。
测试边界拖拽
相对内层容器：
效果：
再相对外层容器：
效果：
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/990445
推荐阅读
相关标签
