拖动和释放 | Drag and Drop

在本教程中,你将学习如何使元件可以被拖动,同时还能学到当拖动的元件被释放后,如何执行操作。【原型预览】

1、元件设置
  1. 打开一个新的RP文件,然后在画布中打开Page 1
  2. 拖拽一个占位符元件到画布中。
  3. 右键点击占位符元件,然后在弹出的右键菜单中选择转换为动态面板

注意:动态面板是唯一支持拖动事件的元件,所以任何你想拖动的元素,都必须放进动态面板中。

2、使用拖动事件移动动态面板
  1. 选中动态面板,点击交互面板面板中的新建交互
  2. 在弹出的列表中选择拖动时事件,然后再选择移动动作。
  3. 目标下拉列表下选择当前元件
  4. 保留移动下拉列表中的跟随移动选项不变,点击确定按钮保存操作。这样在Web浏览器中,就可以使动态面板跟随你鼠标拖动的轨迹移动。
3、预览交互

预览页面,然后拖动占位符元件。

4、当释放拖动时将动态面板移动到原来的位置
  1. 回到Axure RP中,选中动态面板,点击交互面板中的新建交互
  2. 在弹出的列表中选择拖动结束时,然后再选择移动动作。
  3. 目标下拉列表中选择当前元件
  4. 保留移动下拉列表中的回拖动前位置不变,点击确定按钮保存操作。这样在Web浏览中,当你停止拖动动态面板并释放时,它就会自动回到拖动前的位置。
5、预览交互

预览页面,向四周拖动占位符元件,当你停止拖动并释放后,它就会回到拖动前的位置。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。