拖放 | Drag and Drop

使用动态面板元件来制作可拖动的页面元素,通过使用拖动开始时、拖动时、拖动结束时事件,在拖动的不同阶段来触发不同的动作。

STEP 0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP 1:将图片转换为动态面板

在练习文件中打开“拖放”页面。在画布中有四个图片元件和一个回收站图标,我们将创建一个交互行为,可以使用户通过将图片拖放到回收站图标上来删除图片。

动态面板是唯一有用拖动事件的元件,所以我们需要将每个图片都转换成单独的动态面变,以便可以拖动。逐一地在图片上点击鼠标右键,然后在右键菜单中选择“转换为动态面板”。

STEP 2:使动态面板跟随拖动来移动

选中其中一个动态面板,在检视窗口中的属性页签下,双击“拖动时”来添加一个新的拖动时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“移动”动作,在右侧“配置动作”栏,选择“当前元件”。

在右侧“配置动作”栏的底部,注意“移动”下拉列表的选项已经自动设为“拖动”,这样可以实现在浏览器中拖动动态面板时,动态面板跟随鼠标移动。

点击“确定”按钮关闭用例编辑器。

STEP 3:当拖动开始时将动态面板移到顶层

在动态面板被选中的状态下,双击检视窗口属性页签下的“拖动开始时”来创建一个新的拖动开始时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“置于顶层”,然后在右侧“配置动作”栏中选择“当前元件”。这样在浏览器中拖动动态面板时,可以使其处于其他页面元素的上面(而不被其他元素遮挡)。

点击“确定”按钮关闭用例编辑器。

STEP 4:当动态面板在回收站上方被放下时将其隐藏

在动态面板选中的状态下,双加检视窗口中属性页签下的“拖动结束时”来添加一个新的拖动结束时用例。

在用例编辑器的顶部,点击“添加条件”以打开条件设立窗口。

设置第一个下拉列表的选项为“元件范围”,然后设置最后一个下拉列表的选项为“回收站”,当动态面板的任意部分位于“回收站”形状的上方时,这个条件就会生效。

点击“确定”按钮关闭条件设立窗口。

在用例编辑器中,选择左侧“添加动作”栏中的“隐藏”动作(位于“显示/隐藏”动作下),在右侧“配置动作”栏下选择“当前元件”。

点击“确定”按钮关闭用例编辑器。

STEP 5:当动态面板被拖到回收站以外的位置放下时将其移到原位

在动态面板被选中的状态下,双击检视窗口中属性页签下的“拖动结束时”来添加第二个拖动结束时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“移动”,在右侧“配置动作”栏选择“当前元件”。

在右侧“配置动作”栏的底部,注意“移动”下拉列表的选项已经被自动设置为“回到拖动前位置”,这样可以使得动态面板移动到拖动开始的位置。

点击“确定”按钮关闭用例编辑器。

值得注意的是,即使我们没有给这个用例添加条件,它也会显示一个“Else If True”的条件,如果第一个用例没有触发,那么就会触发当前这个用例,也就是动态面板停止拖动时没有在“回收站”形状的上方。

STEP 6:将拖动用例粘贴到其他动态面板上

因为上面所有的动作都引用了“当前元件”,也就是触发事件的元件,所以我们可以对四个动态面板元件使用相同的用例。另外我们也不用一个一个的去设置,直接复制粘贴就可以了。

在动态面板被选中的状态下,按住[CTRL]/[CMD],依次点击检视窗口属性页签下的“拖动开始时”、“拖动时”、“拖动结束时”(需要先选中其中一个之后再按下[CTRL]/[CMD]),然后点击“右键”,在右键菜单中选择“复制”,以便将这几个用例下的事件复制。

然后在其他动态面板上点击右键并选择“粘贴”,这样就可以将复制的用例直接粘贴到“拖动开始时”、“拖动时”、“拖动结束时”事件下面。

将复制的用例粘贴到另外两个动态面板元件上,以使四个动态面板具有相同的拖动用例。

STEP 7:预览

预览页面然后在浏览器中拖动图片,把几个放到回收站上来隐藏它们。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注