--- theme: smartblue highlight: lightfair --- 本文已经授权【稀土掘金技术社区】官方公众号独家原创发布。经常会碰到需要拖拽缩放的情况，只要有思路，实现起来会非常顺畅。
功能的核心是鼠标放在四个边和角上，拖拽把容器放大或缩小 ## 功能演示 **缩放：** 拖动缩放演示.gif

**移动：**

演示网址：[宝藏导航](https://xionglongbing.github.io/Treasure-Navigation/) *** ## 缩放设计思路 1. 使用css绘制四条边和四个角， 2. 通过css定位，控制四根线和四个角在对应的位置 3. 监听鼠标点击和移动事件 4. 在移动的过程中，改变容器的大小 *** ## 核心设计 ### 基础html结构 ```html ``` ### 基础data数据： ```js data: { // 定义可缩放的边和角的类型 resizeTypes: ["lt", "t", "rt", "r", "rb", "b", "lb", "l"], // 定义容器位置和大小的响应式数据 position: { x: this.left, y: this.top }, // 容器的位置 size: { width: this.width, height: this.height }, // 容器的尺寸 } ``` ### 核心代码和思路 > **容器新宽度 = 容器初始宽度 + 鼠标移动距离**
通过上面公式，我们需要记录 1. `容器的初始宽度` 2. `鼠标移动距离 = 鼠标新位置 - 鼠标初始距离` #### 1. 记录容器和鼠标初始状态 ```js // 鼠标按下，开始拖拽 startResize(event) { // 记录鼠标初始位置 this.originMouseX = event.clientX; this.originMouseY = event.clientY; // 记录容器初始宽高 this.originWidth = this.size.width; this.originHeight = this.size.height; }, ``` #### 2. 计算拖拽后新宽度根据：**容器新宽度 = 容器初始宽度 + 鼠标移动距离**
**`拖拽容器右边：`** ```js // 计算鼠标的移动距离 deltaX const deltaX = event.clientX - this.originMouseX; // 容器新宽度 = 初始宽度 + 鼠标移动距离 newWidth = this.originWidth + deltaX; ``` **`拖拽容器右下角：`**
当我们拖拽容器右下角，容器的宽和高都会改变。我们需要把这个拆分成两个步骤来解决。
```js // 获取新宽度 const deltaX = event.clientX - this.originMouseX; newWidth = this.originWidth + deltaX; // 获取新高度 const deltaY = event.clientY - this.originMouseY; // 计算鼠标的纵向位移 newHeight = this.originHeight + deltaY; ``` **`拖拽左边和上边:`**
拖拽左边的时候，左边的定位不能始终都是在原来的位置。
假设:
我们的初始位置是 `left: 200px`。左边向左拖拽`50px`后，需要变为`left: 150px` 首先我们需要在开始的时候记录容器的初始位置 ```js // 鼠标按下，开始拖拽 startResize(event) { // 记录鼠标初始位置 this.originMouseX = event.clientX; this.originMouseY = event.clientY; // 记录容器初始宽高 this.originWidth = this.size.width; this.originHeight = this.size.height; // 记录容器初始位置 this.originContainX = this.position.x; this.originContainY = this.position.y; } ``` 改变宽高的同时，改变容器左上角的位置 ```js // 改变高度 const deltaX = event.clientX - this.originMouseX; newWidth = this.originWidth - deltaX; // 改变左边的位置 this.position.x = this.originContainX + deltaX; ``` #### 3. 确定拖拽的是哪条边我们在点击的时候会传递type,使用变量把type记录下。 ```html ``` ```js // 鼠标按下，开始拖拽 startResize(event, type) { this.resizeType = type; // 记录拖拽的边角的类型 ...... } ``` ```js // 开始拖拽的过程中，改变容器状态 handleResize() { const deltaX = event.clientX - this.originMouseX; // 计算鼠标的横向位移 const deltaY = event.clientY - this.originMouseY; // 计算鼠标的纵向位移 let newWidth = this.originWidth; let newHeight = this.originHeight; // 根据缩放类型计算新的容器尺寸 switch (this.resizeType) { case "lt": // 左上角 newWidth = this.originWidth - deltaX; this.size.width = newWidth; this.position.x = this.originContainX + deltaX; newHeight = this.originHeight - deltaY; this.size.height = newHeight; this.position.y = this.originContainY + deltaY; break; case "t": // 上边 newHeight = this.originHeight - deltaY; this.size.height = newHeight; this.position.y = this.originContainY + deltaY; break; 右边，右下角同理...... } ``` #### 4.设置最小的拖拽宽和高如果新拖拽的宽度，已经小于最小宽度。拖拽时不进行任何改动。 ```js switch (this.resizeType) { case "lt": // 左上角 newWidth = this.originWidth - deltaX; newHeight = this.originHeight - deltaY; if (newWidth >= this.minWidth) { this.position.x = this.originContainX + deltaX; this.size.width = newWidth; } if (newHeight >= this.minHeight) { this.position.y = this.originContainY + deltaY; this.size.height = newHeight; } break; case "t": // 上边 newHeight = this.originHeight - deltaY; if (newHeight >= this.minHeight) { this.position.y = this.originContainY + deltaY; this.size.height = newHeight; } break; 右边边，右下角同理...... } ``` #### 5.添加拖拽移动拖拽移动的详细内容，笔者写的另一篇文章：[拖拽移动详细思路](https://juejin.cn/post/7446366084325769228)
下面的完整代码是结合了拖拽移动和缩放整合在一起，一个较为完整的拖拽组件 *** ## 完整代码 ```js ``` ### 组件引用 ```html

能拖动我了

``` *** ## 总结 > 部分代码设计参考了著名第三方库vxe-modal的设计思路：[vxe-modal](https://vxetable.cn/v2/#/modal/api)
本文实现了拖拽移动和缩放的功能，同学们也可以根据需要往上面添加自己的改动。希望对您有所帮助！