本篇教程探讨了Axure教程之如何设计网页中拖拽控件上下排序的模块，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

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

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！