Axure教程之如何设计网页中拖拽控件上下排序的模块
沉沙 2019-01-29 来源 : 阅读 1085 评论 0

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

本篇教程探讨了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“的交互,其他”组件“的代码直接复制过来即可~    

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

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计