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

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

软件版本说明：以下示例均以Axure RP 9（英文版）为基础进行制作。

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

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

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

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

关于其中原因，我们放在文章的末尾进行解释。 2）为Content增加OnDrag事件

测试1） 按照以上配置，运行；

如图所示，在拖动面板时，四个参数随之改变。 测试2） 仅允许随y方向移动，配置如下：

运行，查看结果；仅允许随x方向移动的配置，参见上图； 测试3） 在测试2的基础上，我们对移动的事件做一些限制： 在OnDrag事件中，我们添加boundary如下图所示：

运行，查看结果，我们可以看出，Content顶部无法移动至窗口外，同样的，可以增加其他的限制条件进行测试，在反复测试后，我们不难得出以下结论： OnDrag的事件中的boundary条件，限制了拖拽事件只能在boundary条件为真时发生。 3）接下来，我们在内容页面中，增加一个模拟的显示窗口（Box，375*667），如下图所示：

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

条件一：Content的顶部必须小于等于窗口的顶部（即只能在窗口的顶部以上拖动）； 条件二：Content的底部必须大于等于窗口的底部（即只能在窗口的底部以下拖动）； 运行，查看结果。如此一来，我们便成功实现了窗口内拖动的功能。

在我们使用APP时，界面下拉后并松开，会触发一次界面的刷新。这个效果又要如何制作呢？ 下面是个简单的示例： 1） 首先，我们将原有的boundary条件中的top限制设置为100，即内容可以下拉至低于窗口顶部100像素的位置； 2） 同时，我们增加OnDragDrop（拖拽释放）事件。在本事件中，我们定义Move 事件，将面板移动至x，y，其中x设置为面板的left，y设置为0，并设置移动的效果为Bounce,500ms。

3） 此时，我们再来运行，查看结果。 后面使用InlineFrame进行页面的关联，就实现了APP中列表显示的效果。

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

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

小问题：

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

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

文章附件下载 密码：gb6l