Axure怎么设计网页中拖拽控件上下排序的模块?

百度经验   发布时间:2019-01-03 16:14:09   作者:goodbyte01   我要评论

Axure怎么设计网页中拖拽控件上下排序的模块?网页中我们经常能见到通过拖拽控件进行上下排版的效果,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下

Axure设计网页圆形的时候,想要实现控件拖拽的上下排序,我们可以通过中继器实现,局限性在于仅能往上拖拽排序,往下无法排序,下面我们就来看看详细的教程。

软件名称:
原型设计工具Axure RP Pro 8.1破解版 中文汉化破解版(附汉化包+注册码+安装教程)
软件大小:
90.5MB
更新时间:
2018-05-24

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

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

新建一矩形,置于底层,命名为“ 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]];

相关文章

  • Axure怎么查看页面的代码? Axure查看页面源代码的两种方法

    Axure怎么查看页面的代码?Axure中制作的网页原型想要看看代码,该怎么查看代码呢?下面我们就来看看Axure查看页面源代码的两种方法,需要的朋友可以参考下
    2018-04-11
  • Axure全局辅助线和页面辅助线有什么区别?

    Axure全局辅助线和页面辅助线有什么区别?Axure中的辅助线有全局辅助线、页面辅助线、对齐辅助线、显示自适应视图辅助线,那么全局辅助线和页面辅助线有什么区别呢?下面我
    2018-04-09
  • Axure动态面板两种创建方法有什么区别?

    Axure动态面板两种创建方法有什么区别?Axure中经常使用东台面板,动态面板有两种创建方法,这两种创建方法有什么区别呢?下面我们就来看看详细的教程
    2018-04-08
  • axure怎么设计密码输入框的原型?

    axure怎么设计密码输入框的原型?axure中想要制作一个可以输入密码的输入框效果,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-04-07
  • Axure有怎么使用格式刷? Axure格式刷的使用方法

    Axure有怎么使用格式刷?Axure中使用格式刷可以更快捷的实现一些功能,省去了做重复工作的机会,今天我们就来看看Axure格式刷的使用方法,需要的朋友可以参考下
    2018-04-03
  • Axure怎么使用热区? axure热区的使用方法

    Axure怎么使用热区?Axure设计原型的时候,热区不是很常用,但是我们也需要了解一下,下面我们就来看看axure热区的使用方法,需要的朋友可以参考下
    2018-04-02
  • Axure8.0母版怎么应用在页面上? Axure母版的使用方法

    Axure8.0母版怎么应用在页面上?Axure中设计页面的时候,想要直接手要你管母版,该怎么使用呢?下面我们就来看看Axure母版的使用方法,需要的朋友可以参考下
    2018-03-29
  • axure怎么使用Icons图标组件设计UI?

    axure怎么使用Icons图标组件设计UI?axure中自带了很多图标组件,该怎么直接调用这些组件图标设计ui呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-03-27
  • axure怎么设计手机屏幕的滚动条原型?

    axure怎么设计手机屏幕的滚动条原型?手机中经常能见到滚动条,该怎么制作滚动条效果呢?下面我们就来看看axure滚动条的制作方法,需要的朋友可以参考下
    2018-03-27
  • axure怎么设计手机app的侧边栏原型?

    axure怎么设计手机app的侧边栏原型?axure中想要设计原型很简单,手机app的侧边栏我们经常见,想要设计这个原型,该怎么设计呢?下面我们就来看看详细的教程,需要的朋友可
    2018-03-27

最新评论