【Axure中继器】改变中继器中数据的序号实现拖动排序的效果

本文适合对中继器有一定使用基础的同学。

先看一下效果，拖动表格数据进行排序。

https://m3wq2w.axshare.com

【实现思路】
1、在Axure中，Panel是支持拖动移动的；
2、如果在中继器中，选中某一个记录进行拖动时，移动某一个动态面板，就可以实现好像数据表中的数据在移动了
3、拖动结束时，判断鼠标移动到哪里了，然后把移动的数据插入当前行，后面行的序号增加1即可。

【需要的组件】
一个中继器、一个动态面板
两个全局变量：MoveRowcount(移动的行数）、finialNo(最后的行的序号）
第一步，拖放一个中继器，如下图：

中继器到数据如下：

双击中继器后，里面一行显示数据的形状（BOX）组件，要设置”MouseOver Style“的属性。为了实现鼠标移动时，实在哪一个行的效果。如下图：

然后，把行中的BOX，全选中，转化为动态面板，如下图：

再放一个另外的“动态面板”，目的是鼠标拖动时，显示当前行的内容。如下图：

这个动态面板，需要设置为“隐藏”，只有拖动的时候显示，拖动结束时，有隐藏。

第二步，写交互事件

1、页面加载时，增加中继器的排序交互，如下图：

2、双击中继器，进入某一行中，选中刚刚转化为“面板”的组件，先写开始拖动的交互，如下图：
说明：交互中的”Panel_dp_Data是另外放的中继器面板的名称。

Move的组件交互说明如下：
[[rp_data.x]]，标识移动到x坐标为这个中继器到x值，y值的话就是当前行的高度，当前行的高度计算公式 = 中继器的y值 + (第几行-1)*40，40是中继器数据行的高度，如果你设置为50，那就是 * 50；
Panel_dp_Data就是另外放的动态面板的名称。
Set Text的就是为了把当前行的数据，显示在另外的动态面板中。

拖动的时候，就是移动这个另外放的“动态面板”了，移动到的x，y坐标值如上图。

下面关键的说明下，拖动结束时的交互，也是实现拖动排序效果的关键交互。

1、移动结束时，不管三七二十一，对变量进行赋值。
MoveRowCount = 拖动的总距离 / 每一行的高度，取整。
FinialNo = 移动的行数 + 移动当前行的序号，如移动的行数为2，移动当前行的为2，则拖动结束时，这一行的数据放在第4行（逻辑的描述）
2、然后根据最后的序号是什么，改变其他行的序号即可实现排序的效果。

–完–