Axure怎么设计网页中拖拽控件上下排序的模块?
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“的交互，其他”组件“的代码直接复制过来即可~
以上就是Axure制作拖拽控件上下排序的教程，希望大家喜欢，请继续关注我们。
相关推荐
-
Win8系统无法打开网页提示"浏览器控件不兼容"解决办法
Win8系统无法打开网页提示"浏览器控件不兼容"解决办法: 1.进入Win8系统,然后,使用鼠标双击要浏览的图标即可将浏览器打开; 2.在Win8系统窗口右上角处,点击工具按钮 ...
-
如何解决电脑浏览器打印网页提示ActviteX控件问题
电脑是现在十分常用的工具之一,有些用户遇到了浏览器打印网页提示ActviteX控件问题,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑浏览器,先点击右上角[三]图标,接着 ...
-
Axure怎么设计网页的登陆页面?
Axure是一款功能强大的交互设计软件,作为产品小白入门时的必学软件,从做一个登录界面开始展开我们的学习历程. 这里我用的是Axure RP 8为大家演示如何制作一个登录界面.作为一个学习分享,如果有 ...
-
Axure怎么设计网页强密码验证效果?
Axure制作的密码输入需要验证验证是否包含大写字母,小写字母,数字和特殊符号,但是Axure不支持正则表达式,所以做一些规则上的验证,嵌套很多,下面我们就来分享强密码验证效果的制作方法,请看下文实例 ...
-
软件设计中那些最基础的控件元素！
控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题.文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收! 一.现实世界的控件 " ...
-
招商银行网页版对账单打印，控件无法安装？
对于使用招商银行作为公司的账户的财务人员,每月都会碰到打印对账单的问题,而招商银行提供2种打印电子对账单的方式,一种是专业版软件上打印,一种则是网页版打印,而在网页版打印中,我们常常会碰到网页控件安装 ...
-
qt怎么使用ui中的控件
生活中有这许许多多的烦恼,下面就由小编教你qt怎么使用ui中的控件,希望你的生活多姿多彩~ 操作方法 01 QT中自己定义的函数,不能直接调用MainWindow类和UI类中的成员. 02 并且在类外 ...
-
C# Menustrip控件的常用属性用法详解
操作方法 01 Name属性:该属性是指示控件的名称,便于访问控件或者是获取控件的值.一般以Mes为前缀. 02 AllowDrop属性:指示是否可以拖拽控件的值,默认设置为True,设置为False ...
-
Win7系统浏览器阻止Activex控件运行怎么办
在使用Win7电脑浏览网页的时候,进入到很多需要运行Activex控件的网站都会出现提示"已限制网页运行Activex控件",虽然说浏览器的这个行为是为了安全考虑,一些正常的插件也 ...
