【Axure教程之高级交互原型5】实例5：自由拖动卡片更换位置的交互原型

【摘要·简介】

本次教程实现的是一个可以自由拖动改变卡片位置的交互原型，类似IOS/安卓系统桌面的拖动图标改变位置。

关键技术点：

1、进一步掌握灵活使用全局变量；

2、学习灵活使用局部变量；

3、学习使用“over area of widget”的逻辑条件

我们先来看一下完成后的效果：

【补充】：因为很多人说看不到附件，我把所有教程附件上传了百度云分享，有兴趣同学自取哈

地址：https://pan.baidu.com/s/19zNM1actwyNiwIGw7vjbDA

——————————————————分割线———————————————

【Step1】搭建场景，建立所需要的全局变量

（1）打开附件压缩包中的“教程初始状态的Axure工程文件.rp”工程文件；

运行一下原型可以看到，左边的选项，和右边的卡片的基础鼠标hover状态交互效果已经完成。如下图1和图2，鼠标放到十字移动图标上，卡片会变成浅蓝色状态；鼠标放到“X”形删除图标上，则由灰色变成红色；

图1：

图2：

鼠标hover状态是比较基础的axure技巧，在此不再赘述，可以看原型工程文件中已经做好的case和action动作。

重点讲述自由拖动卡片的交互逻辑；

（2）第二步，我们来分析一下，如何实现自由拖动?

首先，这里的交互逻辑是：卡片A被拖动到卡片B的位置上，卡片A替换卡片B的位置，卡片B自动挪到卡片A原来的位置。

所以：

A. 我们需要在卡片A开始移动（OnDragStart）的时候，用全局变量X记录下卡片A的位置参数；

B. 在移动结束（OnDragDrop）之后，用局部变量记录下当前卡片B的位置参数，然后作为卡片A的新位置参数，为卡片A的move动作赋值；

C. 同时，卡片B的新位置参数，则由开始移动时候（OnDragStart）记录了卡片A位置的全局变量X赋值，即移动到移动之前卡片A的老位置；

这里我们有三张卡片，所以需要三个全局变量，分别用来记录卡片1、2、3在各自开始移动（OnDragStart）的时候的起始位置参数。

因为这里只有一行卡片，所以拖动卡片时候改变的只有X参数，Y参数不动。

接下来，就是建立几个所需要的全局变量。

点击“Project”菜单下的“Global Variables”，如下图3所示：

图3：

分别命名为group1_X、group2_X、group3_X，如下图4所示：

图4：

——————————————————分割线———————————————

【Step2】在开始拖动卡片的时候，记录下三张卡片的起始位置

（1）选中“Icon_移动”部件（该部件在组“Group1_浏览人数卡片”内），如下图5所示：

图5：

（2）双击选择OnDrag事件，打开case编辑窗口，在左侧栏里选择move事件，并且选择“with drag”，即移动方式为“随着鼠标拖动”，如下图6所示：

图6：

（3）在拖动卡片的时候，我们需要保证该卡片处于最上层，这很好理解，被拖动的卡片在拖动的时候需要保证如下图7所示的效果：

图7：

所以，我们使用“Bring to Front/Back”动作来实现这个逻辑。

双击OnDragStart动作，在弹出的case编辑窗口中，选择添加“Bring to Front/Back”动作，并且在右侧栏里选择部件“Group1_浏览人数卡片”，即在开始移动的时候，即可将卡片1即部件“Group1_浏览人数卡片”自动移动到最上层，如下图8所示：

图8：

（4）这时候，我们还需要记录三个卡片此时的位置。在左侧栏里选择“Set Variable”动作，在右侧则选择第一个变量值“group1_X”,如下图9所示：

图9：

（5）点击如下图10中的红圈所指的“fx”，弹出变量编辑窗口，如下图10所示：

图10：

点击蓝色下划线字符串“Add Local Variable”即添加局部变量，然后可以看到下面新添加了一行公式，中间的下拉框选择“widget”，右边的第三个下拉框则选择部件“Group1_浏览人数卡片”，这句公式的含义即是：局部变量LVAR1指代部件“Group1_浏览人数卡片”，

如下图11所示：

图11：

注：局部变量仅在当前的变量函数公式中有效，离开当前的变量公式，即没有任何意义和影响力。

（6）建立完成局部变量之后，我们来建立真正要给全局变量“group1_X”赋值的公式，点击蓝色下划线字符串“Insert Variable of Function…”，在弹出的下拉框中选择widget的x，即部件的X值，如下图所12所示：

图12：

看到输入框内已经出现了一行公式：“[[This.x]]”，即当前所选部件的x值，我们需要把“This”换成刚刚新建的局部变量值LVAR1（即部件“Group1_浏览人数卡片”），即将当前公式的含义修改成：“部件’Group1_浏览人数卡片’的x值”，

具体方法如下：选中文字“This”，再点击一次蓝色下划线字符串“Insert Variable of Function…”，在弹出的下拉框中选择刚刚在下面新建的局部变量LVAR1,

如下图13和图14所示：

图13：

图14：

这样，公式的含义就变成了“LVAR1的x值”，即部件“Group1_浏览人数卡片”的x值。

（7）完成同样的方法，也为另外两个全局变量赋值，如下图15和图16所示：

图15：

图16：

这样，我们就在开始拖动的时候记录下了此时三张卡片的位置参数值（仅x值）

——————————————————分割线———————————————

【Step3】

（1）接下来，要制作的是在拖动停止的时候（OnDragDrop），自动完成被拖动卡片的落位移动，和被替换位置的卡片的自动挪位移动。

这里需要加一个判断条件：当被拖动卡片的位置处于被替换卡片的范围内（area of widget）的时候。

否则，若松开鼠标拖动停止，被拖动卡片自动回到原来的位置。

我们依然选中部件“Icon_移动”，双击OnDragDrop，打开case编辑窗口，并点击“Add Condition”按钮，打开条件编辑窗口，因为此时在这里我们要先设定一个条件：当被拖动卡片拖动到被替换位置的卡片的范围（即area of widget）内的时候。如下图17所示：

图17：

（2）将第一个下拉框设定为“area of widget”，如下图18所示：

图18：

第二个下拉框设定为This，即表示当前所选部件（Icon_移动）的大小范围。然后设定第三个下拉框为“is over”，即覆盖、进入的含义；然后第四个下拉框依然选择“area of widget”，最后设定为第五个下拉框为“Group2_发生交易会员数 卡片”，如下图19所示：

图19：

这个条件的含义是：当部件“Icon_移动”移动进入到了部件“Group2_发生交易会员数 卡片”即被替换位置卡片的大小区域范围内的时候。

（3）条件编辑完后，添加一个move动作，并在右侧选中“Group2_发生交易会员数 卡片”，下方的move方式选择“to”，如下图20所示：

图20：

即要将第二张卡片，也就是即将被替换位置的卡片“Group2_发生交易会员数 卡片”移动到一个新的位置上，先设定y值为254，然后点击x右侧的“fx”，弹出值编辑窗口，如下图21所示：

图21：

就像前面所说的，被替换卡片要移动过去的新位置，也就是原先被拖动卡片的在刚开始还没拖动时候的起始位置，那么这里就要用到之前那个全局变量了，也就是在开始移动（OnDragStart）时候用来记录被拖动卡片起始位置参数的全局变量“group1_X”了。

点击“Insert Variable of Function”，在弹出的下拉框内选择全局变量“group1_X”，如下图22所示：

图22：

点击OK，回到case编辑窗口。然后再点击“Animate”，设定移动的动画曲线为“ease out cubic”，时长为240ms，如下图23所示：

图23：

（4）这样，被替换位置的卡片移动动画设置完成。我们再来设置被拖动卡片将要移动过去的新位置，也就是落位到被替换卡片的原先位置。同样在左侧栏选择添加move动作，然后在右侧栏里选择“Group1_浏览人数卡片”也就是被拖动的那张卡片，move方式同样是“to”，y的参数同样是254，如下图24所示：

图24：

同样还需要点击x右边的“fx”弹出值编辑窗口，和前面一样点击“Insert Variable of Function”，在弹出的下拉框内选择全局变量“group2_X”，全局变量“group2_X”记录的是卡片2也就是刚刚被替换位置的卡片的起始位置参数。

这很简单，这里的含义就是：被拖动卡片的新位置参数 = 被拖动卡片的起始位置参数，这样就实现了“被拖动卡片移动到被替换卡片的位置上”的效果。

如下图25所示：、

图25:

最后，还需要再点击“Animate”，设定移动的动画曲线为“ease out cubic”，时长为240ms。

我们来运行一下原型，拖动卡片1到卡片2的大致区域范围上，松开鼠标，可以看到卡片1和卡片自动互换了位置。

（5）最后，我们还要再为“Icon_移动”再添加一个case，这个case不需要设定条件，这个case的含义就是除了移动到其他卡片范围内的情况，移动到其他任何地方，松开鼠标就都自动回到原位，即不做更改卡片位置的操作。

再次双击“OnDragDrop”，新添加一个case，再添加一个move动作，如下图26所示：

图26：

在右侧选中“Group1_浏览人数卡片”也就是被拖动的那张卡片，move方式为“to”，y参数同样还是254，而x则还是需要点击“fx”，我们需要将其设定为等于全局变量“group1_X”，也就是卡片1在开始移动前的起始位置，这里的含义就是：卡片1回到移动前的起始位置。

另外，还需要点击“Animate”，设定移动的动画曲线为“ease out cubic”，时长为240ms。

最后设定值如下图27所示：

图27：

（6）那么当卡片1被拖动到卡片3的位置上时候，又如何设定移动参数呢？和刚才设置的与卡片2互换位置基本上是一样的，只是OnDragDrop时候，卡片1的新位置参数要设置为另一个全局变量“group3_X”即卡片3在开始拖动前的起始位置。

除此之外，同样也需要设定一个条件：当部件“Icon_移动”移动进入到了部件“Group3_免费领取&付费购买会员数卡片”即被替换位置卡片的大小区域范围内的时候。所有设定如下图28所示：

图28：

对于卡片2和卡片3，执行同样的case编辑操作。这里就不再赘述了，大家可以自己试一下，要注意设定不同的全局变量。

如下图29和图30所示：

图29：

图30：