-
图文帮你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)
另新建一矩形,设置矩形内容为“组件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
判定条件:
猜您喜欢
- HP打印机打印慢?这几个技巧帮你解决..2024-03-29
- Windows忘记pin码?别担心,这个方法帮..2024-03-29
- 插U盘频繁弹出提示格式化?这个方法..2024-03-27
- 耳机插上电脑有滋滋声?这个方法帮你..2024-03-26
- Windows空格键失灵?别担心,一招帮你..2024-03-25
- 幻兽帕鲁闪退报错?这招帮你轻松解决..2024-03-23
相关推荐
- AMI BIOS主板怎么恢复出厂设置+清CMOS教..2023-02-09
- 大富翁4电脑版闪退?手把手教你轻松..2023-12-24
- cbox央视影音播放不了直播的解决方法..2021-06-26
- win11快捷键打开设置 win11快捷键打开设..2022-10-30
- 怎么卸载office2016,怎么卸载word2016..2020-12-19
- 怎么制做BT种子..2017-10-12