在本教程中,你将学习如何使元件可以被拖动,同时还能学到当拖动的元件被释放后,如何执行操作。【原型预览】
1、元件设置
- 打开一个新的RP文件,然后在画布中打开Page 1。
- 拖拽一个占位符元件到画布中。
- 右键点击占位符元件,然后在弹出的右键菜单中选择转换为动态面板。
注意:动态面板是唯一支持拖动事件的元件,所以任何你想拖动的元素,都必须放进动态面板中。
2、使用拖动事件移动动态面板
- 选中动态面板,点击交互面板面板中的新建交互。
- 在弹出的列表中选择拖动时事件,然后再选择移动动作。
- 在目标下拉列表下选择当前元件。
- 保留移动下拉列表中的跟随移动选项不变,点击确定按钮保存操作。这样在Web浏览器中,就可以使动态面板跟随你鼠标拖动的轨迹移动。
3、预览交互
预览页面,然后拖动占位符元件。
4、当释放拖动时将动态面板移动到原来的位置
- 回到Axure RP中,选中动态面板,点击交互面板中的新建交互。
- 在弹出的列表中选择拖动结束时,然后再选择移动动作。
- 在目标下拉列表中选择当前元件。
- 保留移动下拉列表中的回拖动前位置不变,点击确定按钮保存操作。这样在Web浏览中,当你停止拖动动态面板并释放时,它就会自动回到拖动前的位置。
5、预览交互
预览页面,向四周拖动占位符元件,当你停止拖动并释放后,它就会回到拖动前的位置。