1、看似一个复杂的效果，实现起来发现也挺简单的，经过测试，发现只要设置一个“组件”的交互，其他“组件”的代码完全相同，哈哈，仅仅只要复制、粘贴即可~
2、主要的应用方式，就是鼠标拖拽”控件“移动（可参考早期链接），并判断”控件“所在位置~
3、新建一矩形，置于底层，命名为“background”，尺寸450*450（大小随意），隐藏，并锁定位置（105,20）
4、另新建一矩形，设置矩形内容为“组件1”，填充色#CCCCCC，尺寸大小为240*75；并转为”动态面板“；此动态面板，命名为”Module1“，设置尺寸为240*80；
5、此动态面板，命名为”Module1“，设置尺寸为240*80；
6、可以另复制3份”动态面：Module1“，分别命名为”Module2“、”Module3“、”Module4“，并修改其内容为“组件2”、“组件3”、“组件4”及填充色；“Module1“、”Module2“、”Module3“、”Module4“，垂直排列，组件上下之间无间隙~（间隙预留在了动态面板state1中）参考如下：
7、也可以在设置好”动态面：Module1“的交互动作后，再复制，并做想相应的修改；
8、”动态面板：组件“的交互大致相同，所以这里仅作”动态面板：组件1“的交互说明，其他不再赘述~
9、”动态面板：组件1“的”拖动开始时“的Case1用例：---1.隐藏”动态面板：组件1“；拉动元件：下方；动画：线性；时间：100毫秒2.显示”动态面板：组件1“；置于顶层---（隐藏”动态面板：组件1“时的拉动元件，可以不设置动画，设置动画及时间是为了有个“移动”的感觉，副作用就是相应的操作不能过快）
10、”动态面板：组件1“的”拖动时“的Case1用例：---垂直拖动“动态面板：组件1“；移动：垂直拖动；设置界限---
11、设置“元件：background”为局部变量LVAR1；所以，界限的顶部大于等于[[LVAR1.top]]，底部小于[[LVAR1.bottom]]；
12、”动态面板：组件1“的”拖动结束时“的交互就比较多，主要是判断“组件”的位置，这里只设置4个组件的移动，所以有几个临界点，分别为（200,140），（200,220），（200,300）；（这里使用了绝对数值，这不是一个很好的法子，也仅为演示效果及快速实现需要；下一篇优化时，转为动态计算来回避绝对数值带来的局限性）
13、用例：Case1判定条件：”值：[[This.y+this.height/2]]小于等于140“
14、动作：---1.移动当前组件到达（200，100）；动画：无2.隐藏当前组件3.显示当前组件；推动元件：下方---
15、同理，设置用例Case2，Case3，Case4
16、用例：Case2判定条件：”值：[[This.y+this.height/2]]小于等于220；“且”值：[[This.y+this.height/2]]大于140；“
17、动作：---1.移动当前组件到达（200，180）；动画：无2.隐藏当前组件3.显示当前组件；推动元件：下方---
18、用例：Case3判定条件：”值：[[This.y+this.height/2]]小于等于300；“且”值：[[This.y+this.height/2]]大于220；“
19、动作：---1.移动当前组件到达（200，260）；动画：无2.隐藏当前组件3.显示当前组件；推动元件：下方---
20、用例：Case4判定条件：”值：[[This.y+this.height/2]]大于300；“
21、动作：---1.移动当前组件到达（200，340）；动画：无2.隐藏当前组件3.显示当前组件；推动元件：下方---
22、仅仅几步简单的设置，就完成了”动态面板：组件1“的交互，其他”组件“的代码直接复制过来即可~
23、当然，这个仅是快速实现效果的原始案例，下一篇，针对临界点，做优化处理~
24、觉得不错，对你有帮助的话，请投个票，加个赞哦~