【Axure中继器】利用中继器的排序和过滤功能实现拖动字段磁吸的效果

我们在做产品时，很多时候都会需要对报表进行汇总，而且汇总的维度都是灵活的，根据拖动字段且根据顺序来进行汇总。

这里对拖动字段到需要汇总到列表中，并且对汇总顺序进行排序到效果进行一个Axure实现。

演示效果https://tr5k1p.axshare.com/

一、先说思路
要实现这样的效果，其实可以利用中继器的排序/过滤的功能来实现。被拖走字段的中继器，则设置当前被拖走字段的行(hang)为不可见（通过过滤条件实现），拖动字段目标中继器则添加一行记录即可。当把字段从目标中继器拖走时，则删除目标中继器的当前行，原中继器的行(hang)则设置为可见即可。
排序的效果，只需要拖动某个字段，在结束拖动时，判断拖到那个位置后，然后重新设置序列号就可以了。

二、需要的组件说明
1、总的组件说明：
两个中继器（一个放原字段数据；一个放目标数据）、一个目标的区域Box（RECT)、一个在拖动排序时用于显示拖动内容的面板（Panel)。
特别说明：在中继器里面，显示内容的都需要放一个面板(Panel)，因为在Axure中，只有面板支持拖动交互。如图：

两个中继器的属性设置如下：

原中继器（本按例中命名为:rpDataSrc)

目标中继器（本按例中命名为：rpData)

中继器里面的组件说明，见下图：

2、设置两个全局变量：CurNo(拖动排序时，保存拖动后的当前序号)，finialNo（拖动排序时，用于计算保存被拖动的字段最后应该是第几的序号）

三、交互说明

1、原中继器加载的交互(rpDataSrc):

目的是：增加过滤器，被拖走的字段，则把See的值设置为0，就不会显示了

2、目标中继器的加载交互（rpData)

增加排序功能，就是通过改变这个OrderNo的值来实现拖动排序的效果。另外rpData的数据显示方式要设置为水平，如图：

3、从原中继器中拖动字段到目标中继器的交互

重点说明：

1、如果拖动字段到了目标中继器的范围内（范围我用一个RectBox组件框起来，并且命名为：ShowArea则做如下动作：
a.原中继器中被拖动的行（一行就是一个字段），设置see = 0，目的是隐藏这个被拖走的字段；
b.目标中继器中增加一行数据，如下图：

4、开始拖动目标中继器中的字段交互：

说明：

当拖动是，需要把被拖动字段的内容赋值给 用于显示拖动的面板

5、拖动目标中继器中的字段，有两种场景：

5.1把字段从目标中继器中拖离目标区域，就是第三个交互的反操作，如下图：

5.2 如果没有离开目标区域，则认为是拖动排序的操作。拖动排序的基本思路就是：判断被拖动的字段当前的序号，在判断是往右拖动还是往左拖动；如果是往右拖动，则拖动某个地方的序号之后所有的序号都 加1，往左则减一，如下图所示：

交互如下：

–完–