中继器拖拽排序

本文需要读者掌握中继器的基础用法，如果你还不懂中继器如何使用，请先参考我之前写过的文章。传送门>>

首先看看效果。

掌握了本文的思路，你可以很简单地设计出各种场景的排序效果，比如下方的银行卡列表排序。

点击 传送门>>** **可以在线进行体验。

接下来通过一个拖动十二生肖图片进行排序的案例分享如何实现这个效果。

首先在 Axure 画布中拖入一个【中继器】，中继器内拖入一个【动态面板】，动态面板内拖入【图片】元件，这里图片元件不用设置具体图片，待会通过中继器来获取。

接下来配置中继器，中继器的数据结构如下：

中继器总共 3 列 12 行：

列名：

num：存储排序值，由于我这里用了汉化包，所以数值排序不能正常使用，只能按文本排序，在文本排序规则中，2 > 10，所以这里我从 11 开始计数。

text：存储生肖名，这一列主要是为了方便知道当前这一行需要放什么生效的图片，没有其他用处。

img：存储生效图片，中继器存储图片只需要在对应单元格单击鼠标右键选择【导入图片】即可。

添加好十二生肖的数据之后，再对中继器的【间距】和【布局】进行如下调整：

接着给中继器添加【项目加载时】，给中继器-动态面板中的图片元件【设置图片】，取值为【Item.img】，即中继器中的 img 列的图片：

设置后即可看到如下效果：

接下来先说说排序的逻辑，掌握了这个逻辑，你可以有很多种方法来实现这个排序的设计。

假设现在有12个方块，方块的排序是按照方块内的文字从小到大排序的。

如果这个时候我们想把蓝色的方块挪到黄色的方块前面，我们可以通过改变方块内的数值然后重新排序来实现。

比如我们可以将蓝色方块中的数值由“9”改成“5”，但这时已经存在“5”这个数值了，所以我们要先将“5”以上的数值全部往上加1，这样数值“5”就释放出来了，调整后的序列如下：

在得到的新序列中，原本的蓝色方块就挪到了黄色方块前面。

接下来我们在 Axure 中实现这个逻辑，首先需要添加两个【全局变量】：

draw_num：用来保存当前正在拖动的这种图片的 num，可以理解为上文序列中的蓝色方块的值。

hover_num：用来保存当前悬停的图片的 num，也就是需要将目标图片插入到此图片前方，可以理解为上文序列中的黄色方块的值。

接下来写交互，交互的事件都是写在中继器中的动态面板上。

先添加动态面板【拖动时】的交互，让动态面板跟随拖动进行移动，并且将当前拖动的图片的 num 保存到变量 draw_num：

拖动时，鼠标会在其他图片上放经过，此时我们给动态面板添加【鼠标移入时】将当前悬停图片的 num 保存到变量 hover_num 的事件：

鼠标移入图片之后，可能又移开了，所以在【鼠标移出时】，我们需要将 hover_num 的值清空，或者设为 draw_num，表示当前拖拽的图片跟悬停的图片是同一张：

接下来重头戏来了，在拖拽后松开鼠标时，也就是【拖动结束时】，我们需要做一个判断，如果 draw_num = hover_num 时（如果在上一步的鼠标移出事件设置的是清空 hover_num，这里的判断条件就是 hover_num == ""，即 hover_num 为空），表示拖动的图片没有准备插入的目标，这个时候需要将图片【移动回拖动前位置】：

反之，则按上文举例的序列的逻辑，先将大于等于 hover_num 的数值全部加1（注意这里要选择 TargetItem.num，而不是 Item.num，后者指的是当前拖动的图片的 num，如果选错了，会把后面的值全部都设置成一样的）；

更新完之后，再将当前的 num 改成 hover_num；

最后再给中继器添加排序就可以了：

为了体验效果好点，我们还可以给图片增加一个图片悬停时的样式：

接下来预览一下效果：

跟想象中的有点不一样，拖拽的图片挡着鼠标，所以完全鼠标完全不会触发悬停的事件，这里我们可以投机取巧，设置拖动时，将当前的图片放到最底下一层：

再来看看效果：

这个排序功能就做完了，但是这种体验太差了，拖动的图片在最下方，显然不符合正常用户的认知，这里我们可以优化一下。

我们的目的无非就是让鼠标在拖动图片时，不被拖动的图片挡住，因此我们可以在移动图片时，让图片置顶，并给图片设置一个与鼠标的偏移量，比如 x 和 y 与鼠标的 x、y 偏离 5，如下：

再来看看效果：

我们需要的效果有了，但是会发现，在拖动最下方的图片时，被拖动的图片却跟鼠标离的很远，这是因为元件在中继器内的定位跟中继器外的定位逻辑不一样造成的，也可以认为是 Axure 的一个 bug，至于这个问题可以怎么来解决，就留给各位读者了。