制作原型的时候，我们也会经常使用拖拽效果，今天我们就来一起看看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
网友评论