大庆市住房和城乡建设局网站app网络推广方案

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

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

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

vitepress文档完善

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

基本实现

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

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

实现后的效果：

区域拖拽实现

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

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

测试边界拖拽

相对内层容器：

效果：

再相对外层容器：

效果：