系统吧 专业的电脑操作系统,支持重装各种原版系统xp/win7/win8/win10 这个系统怎么样?试试系统吧系统,体验办公系统畅快愉悦感。 各种电脑系统安装过程一样,神一般的畅快!
-->
当前位置:主页 > 电脑技术 >

图文帮你Axure设计: 拖拽控件上下排序

作者:李黄颜 分类:电脑技术 发布时间:2017-09-19 18:04:36

电脑现已成为我们工作、生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到Axure设计: 拖拽控件上下排序的问题,如果我们遇到了Axure设计: 拖拽控件上下排序的情况,该怎么处理怎么才能解决Axure设计: 拖拽控件上下排序带来的困扰呢,对于这样的问题其实我们只需要Axure RP 8看似一个复杂的效果,实现起来发现也挺简单的,经过测试,发现只要设置一个“组件”的交互,其他“组件”的代码完全相同,哈哈,仅仅只要复制、粘贴即可...

电脑现已成为我们工作、生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到Axure设计: 拖拽控件上下排序的问题,如果我们遇到了Axure设计: 拖拽控件上下排序的情况,该怎么处理怎么才能解决Axure设计: 拖拽控件上下排序带来的困扰呢,对于这样的问题其实我们只需要Axure RP 8看似一个复杂的效果,实现起来发现也挺简单的,经过测试,发现只要设置一个“组件”的交互,其他“组件”的代码完全相同,哈哈,仅仅只要复制、粘贴即可~主要的应用方式,就是鼠标拖拽”控件“移动(可参考早期链接),并判断”控件“所在位置~新建一矩形,置于底层,命名为“background”,尺寸450*450(大小随意),隐藏,并锁定位置(105,20)另新建一矩形,设置矩形内容为“组件这样就解决了这样的问题,接下来给大家带来Axure设计: 拖拽控件上下排序的详细操作步骤。

工具/原料

Axure RP 8

方法/步骤

看似一个复杂的效果,实现起来发现也挺简单的,经过测试,发现只要设置一个“组件”的交互,其他“组件”的代码完全相同,哈哈,仅仅只要复制、粘贴即可~

主要的应用方式,就是鼠标拖拽”控件“移动(可参考早期链接),并判断”控件“所在位置~

新建一矩形,置于底层,命名为“background”,尺寸450*450(大小随意),隐藏,并锁定位置(105,20)

图文帮你Axure设计: 拖拽控件上下排序

另新建一矩形,设置矩形内容为“组件1”,填充色#CCCCCC,尺寸大小为240*75;并转为”动态面板“;

此动态面板,命名为”Module1“,设置尺寸为240*80;

图文帮你Axure设计: 拖拽控件上下排序

此动态面板,命名为”Module1“,设置尺寸为240*80;

图文帮你Axure设计: 拖拽控件上下排序

可以另复制3份”动态面:Module1“,分别命名为”Module2“、”Module3“、”Module4“,并修改其内容为“组件2”、“组件3”、“组件4”及填充色;

“Module1“、”Module2“、”Module3“、”Module4“,垂直排列,组件上下之间无间隙~(间隙预留在了动态面板state1中)

参考如下:

图文帮你Axure设计: 拖拽控件上下排序

也可以在设置好”动态面:Module1“的交互动作后,再复制,并做想相应的修改;

”动态面板:组件“的交互大致相同,所以这里仅作”动态面板:组件1“的交互说明,其他不再赘述~

”动态面板:组件1“的”拖动开始时“的Case1用例:

---

1.隐藏”动态面板:组件1“;拉动元件:下方;动画:线性;时间:100毫秒

2.显示”动态面板:组件1“;置于顶层

---

(隐藏”动态面板:组件1“时的拉动元件,可以不设置动画,设置动画及时间是为了有个“移动”的感觉,副作用就是相应的操作不能过快)

图文帮你Axure设计: 拖拽控件上下排序

图文帮你Axure设计: 拖拽控件上下排序

”动态面板:组件1“的”拖动时“的Case1用例:

---

垂直拖动“动态面板:组件1“;移动:垂直拖动;设置界限

---

图文帮你Axure设计: 拖拽控件上下排序

设置“元件:background”为局部变量LVAR1;

所以,界限的顶部大于等于[[LVAR1.top]],底部小于[[LVAR1.bottom]];

图文帮你Axure设计: 拖拽控件上下排序

图文帮你Axure设计: 拖拽控件上下排序

”动态面板:组件1“的”拖动结束时“的交互就比较多,主要是判断“组件”的位置,这里只设置4个组件的移动,所以有几个临界点,分别为(200,140),(200,220),(200,300);

(这里使用了绝对数值,这不是一个很好的法子,也仅为演示效果及快速实现需要;下一篇优化时,转为动态计算来回避绝对数值带来的局限性)

图文帮你Axure设计: 拖拽控件上下排序

用例:Case1

判定条件:

”值:[[This.y+this.height/2]]小于等于140“

图文帮你Axure设计: 拖拽控件上下排序

动作:

---

1.移动当前组件到达(200,100);动画:无

2.隐藏当前组件

3.显示当前组件;推动元件:下方

---

图文帮你Axure设计: 拖拽控件上下排序

图文帮你Axure设计: 拖拽控件上下排序

图文帮你Axure设计: 拖拽控件上下排序

同理,设置用例Case2,Case3,Case4

用例:Case2

判定条件:

xp 更多>>
win7 更多>>
win8 更多>>
win10 更多>>
U盘 更多>>
电脑技术 更多>>
网站地图 | 豫ICP备2021035069号-4 | 友情链接qq:191064436
系统吧

版权所有 © 2012-2023 系统吧 免责声明:本站资源均收集于互联网,其著作权归原作者所有,如果有侵犯您权利的资源,请来信告知,我们将及时删除相应资源。