## 多组件对齐和拖拽移动功能

注意前端版本、vue版本 <br>

- 1、多组件选中实现 <br>
- 2、对齐实现 <br>
- 3、拖拽实现 <br>

### 1、多组件选中

- 1、Ctrl键 <br>
- 2、鼠标框选 <br>
- 3、组合 <br>

#### 方式1  Ctrl键实现多选

- 1、第一次单击组件，会默认把选中的组件加入到已选中的组件集合中 <br>
- 2、按住Ctrl键选中的组件，会加入到已选中的组件集合中 <br>
- 3、按住Ctrl键选中的组件，如果已选中的组件中包含该组件，则该组件取消选中 <br>
- 4、点击大屏其他位置（非组件），会把选中的组件清空 <br>

![01](./picture/img_01.png)

#### 方式2  鼠标框选实现多选

- 1、鼠标 （按下，移动，释放）生成矩形框，跟矩形框相交的组件会被选中 <br>
- 2、组合方式多选的情况下，框选之前已选中的组件不会加入（除非框选也有） <br>
- 3、框选的组件，也支持按住Ctrl键取消选中 <br>
- 4、点击大屏其他位置（非组件），会把选中的组件清空 <br>

![02](./picture/img_02.png) <br>

![03](./picture/img_03.png) <br>

![04](./picture/img_04.png) <br>

### 2、多组件对齐

单选右键菜单 <br>

![05](./picture/img_05.png) <br>

多选右键菜单 <br>

![06](./picture/img_06.png) <br>

#### 左对齐/右对齐/居中对齐

选择左对齐 （以最上边的组件为标准对齐）---不合适自己可以修改代码 <br>

![07](./picture/img_07.png) <br>

#### 上对齐/下对齐/居中对齐

选择上对齐（以最左边的组件为标准对齐）----不合适自己可以修改代码 <br>

![08](./picture/img_08.png) <br>

![09](./picture/img_09.png) <br>

### 3、多组件移动拖拽

#### 多选状态

![10](./picture/img_10.png) <br>

#### 拖拽后

![11](./picture/img_11.png) <br>