大屏设计多组件对齐和拖拽移动实现

doc/docs/guide/community/JiangHH/AJ_Report大屏设计时多组件对齐和拖拽移动实现.md

@@ -0,0 +1,81 @@
+## 多组件对齐和拖拽移动功能
+
+注意前端版本 vue版本
+
+1.多组件选中实现
+2.对齐实现
+3.拖拽实现
+
+### 1、多组件选中
+1. Ctrl键
+2. 鼠标框选
+3. 组合
+
+#### 方式1  Ctrl键实现多选
+说明：
+
+1. 第一次单击组件，会默认把选中的组件加入到已选中的组件集合中.
+2. 按住Ctrl键选中的组件，会加入到已选中的组件集合中.
+3. 按住Ctrl键选中的组件，如果已选中的组件中包含该组件，则该组件取消选中.
+4. 点击大屏其他位置（非组件）,会把选中的组件清空.
+
+测试截图：
+
+![](.\picture\img_01.png)
+
+#### 方式2  鼠标框选实现多选
+说明：
+
+1. 鼠标 （按下，移动，释放）生成矩形框，跟矩形框相交的组件会被选中.
+2. 组合方式多选的情况下，框选之前已选中的组件不会加入（除非框选也有）.
+3. 框选的组件，也支持按住Ctrl键取消选中.
+4. 点击大屏其他位置（非组件）,会把选中的组件清空.
+
+1. ​    鼠标按下，移动，释放，会生成一个矩形框，跟矩形框相交的组件爱你，会被选中.
+2. ​    2.组合方式多选的情况下，框选之前已选中的组件不会加入（除非框选也有）.
+3. ​    3.框选的组件，也支持按住Ctrl键取消选中.
+4. ​    4.点击大屏其他位置（非组件）,会把选中的组件清空.
+
+- ​    1.鼠标按下，移动，释放，会生成一个矩形框，跟矩形框相交的组件爱你，会被选中.
+
+测试截图：
+
+![](.\picture\img_02.png)
+
+![](.\picture\img_03.png)
+
+![](.\picture\img_04.png)
+
+### 2、多组件对齐
+
+单选右键菜单
+
+![](.\picture\img_05.png)
+
+多选右键菜单
+
+![](.\picture\img_06.png)
+
+#### 左对齐/右对齐/居中对齐
+
+选择左对齐 （以最上边的组件为标准对齐）---不合适自己可以修改代码
+
+![](.\picture\img_07.png)
+
+#### 上对齐/下对齐/居中对齐
+
+选择上对齐（以最左边的组件为标准对齐）----不合适自己可以修改代码
+
+![](.\picture\img_08.png)
+
+![](.\picture\img_09.png)
+
+### 3、多组件移动拖拽
+
+#### 多选状态
+
+![](.\picture\img_10.png)
+
+#### 拖拽后
+
+![](.\picture\img_11.png)