Axure RP9中OnDrag(拖拽)的使用说明

制作原型的时候,我们也会经常使用拖拽效果,今天我们就来一起看看OnDrag的事件。


版权说明:以下内容,除标明引用的部分,均为原创,转发时请标明出处,不要用于商业培训等用途哦~,感谢支持。

软件版本说明:以下示例均以Axure RP

9(英文版)为基础进行制作。

意见与建议:欢迎大家留言,一起开发新的讨论课题。


        我们设置一个内容页面,并在内容页面中,放置动态面板(命名:Content),并将大小设置为宽349 高2810,并在面板中添加需要现实的内容。

1)为了方便测试,我们在内容面板右侧,放置两个文本,分别用于显示面板的top、bottom、left和right。


界面布局

注:Content请勿勾选缩放以适应内容


注:请勿勾选fit

关于其中原因,我们放在文章的末尾进行解释。


2)为Content增加OnDrag事件


编辑OnDrag事件

        测试1)按照以上配置,运行;


测试1运行结果

        如图所示,在拖动面板时,四个参数随之改变。

        测试2)仅允许随y方向移动,配置如下:


测试2配置

        运行,查看结果;仅允许随x方向移动的配置,参见上图;

        测试3)在测试2的基础上,我们对移动的事件做一些限制:

        在OnDrag事件中,我们添加boundary如下图所示:


增加boundary条件

        运行,查看结果,我们可以看出,Content顶部无法移动至窗口外,同样的,可以增加其他的限制条件进行测试,在反复测试后,我们不难得出以下结论:

        OnDrag的事件中的boundary条件,限制了拖拽事件只能在boundary条件为真时发生。

3)接下来,我们在内容页面中,增加一个模拟的显示窗口(Box,375*667),如下图所示:


增加模拟窗口

        我们现在对OnDrag事件中的boundary条件进行编辑,使得内容在上下拖动时Box中不能出现空白区域


更新后的boundary条件

        条件一:Content的顶部必须小于等于窗口的顶部(即只能在窗口的顶部以上拖动);

        条件二:Content的底部必须大于等于窗口的底部(即只能在窗口的底部以下拖动);

        运行,查看结果。如此一来,我们便成功实现了窗口内拖动的功能。


4)在我们使用APP时,界面下拉后并松开,会触发一次界面的刷新。这个效果又要如何制作呢?

下面是个简单的示例:

        a)首先,我们将原有的boundary条件中的top限制设置为100,即内容可以下拉至低于窗口顶部100像素的位置;

        b)同时,我们增加OnDragDrop(拖拽释放)事件。在本事件中,我们定义Move 事件,将面板移动至x,y,其中x设置为面板的left,y设置为0,并设置移动的效果为Bounce,500ms。


设置回弹参数

        c)此时,我们再来运行,查看结果。

最终,我们使用InlineFrame进行页面的关联,就实现了APP中列表显示的效果。


注的解释:

动态面板设置自适应时,在其加载时,由于内容没有加载,因此,得到的高度其实为默认高度,与内容无关。如下图所示。


设置自适应
未设置自适应

此时,就不能使用bottom来限制窗口的移动了。

小问题:

1、如果设置了适应内容,我们应该如何修改限制条件,来达到同样的效果呢?

2、尝试使用全局变量,使得InlineFrame窗口的大小发生变化时,Content的OnDrag函数的条件参数不用修改。


文章中的附件:

百度网盘下载地址    密码:gb6l

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,589评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,615评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,933评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,976评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,999评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,775评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,474评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,359评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,854评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,007评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,146评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,826评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,484评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,029评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,153评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,420评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,107评论 2 356

推荐阅读更多精彩内容