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