今天教大家用中继器制作拖动分组选择器的原型模板，制作完成后可以通过拖动的方式，将成员在不同的组别中自由分组。该模版是用中继器制作的，所以使用也很方便，每个分组的信息，只需要在中继器表格里维护。具体效果可以打开下方原型预览地址查看
【原型预览含下载地址】
https://axhub.im/ax9/10fc5fb77521f868/#g=1&p=拖动分组选择器
【原型效果】
1、可以通过鼠标拖动的方式，移动各个分组内容的成员；
2、如果拖动到其他的分组松开鼠标，该被拖动的成员加入该分组；
3、如果拖动到空白的位置松开鼠标，该被拖动的成员返回原来的分组。
【原型教程】
1 、材料准备
主要材料为中继器、矩形文本标签、图片元件、动态面板和插画素材。
如果分组没有内容时，我们就显示背景矩形和插画素材，如下图所示摆放：
如果分组里有内容时，我们就显示中继器列表和背景矩形，如下图所示摆放：
中继器的元件包括图片、文本标签和和背景矩形如下图所示摆放
表格内需要两列一列存放文字、一列导入对应的图片，案例中将默认的Column0列作为文字列，新增的pic列作为图片列。
2 、交互制作
2.1 设置数据
我们首先要把中继器表格里的数据内容设置到对应的元件里，如果是Axure10或以上的版本，我们只需要点击每列内容里的连接元件，column0列选择文本标签，pic列选择图片元件；如果是Axure9或以下的版本，就要在中继器每项加载时，分别用设置什么和设置图片的交互，将column0列的值设置到文本标签，pic列设置到图片元件。
2.2 拖动设置
我们先将中继器里的所有的元件转为动态面板，因为只有动态面板才可以被拖动，然后还要给背景矩形设置一个选中样式，鼠标拖动时，用选中的交互，将背景矩形设置为选中，这样拖动的时候，那个内容就会高亮显示了。然后用移动的交互，让拖动的组合跟随鼠标移动。因为拖动时，如果有多个组，可能就会被其他元件遮挡，这里我们可以用置顶的交互，把拖动的内容置顶这样就不会被其他内容遮挡了。
这样一个组合就完成制作了，接下来我们根据需要复制多几个组，填写对应的数据。
在拖动动态面板时，我们可以增加一个条件判断，例如如果拖动的位置在B组和的区域里，我们就选中B组合的背景矩形，这里要先设置矩形的选中样式，这样拖进对应组的区域，就会高亮变色，我们就可以知道我们拖进了哪个组合里；如果离开了B组的区域就取消对应背景矩形的选中。同理如果有C、D、E、F等分组，也是同样的设置
拖动结束时，我们要做判断，判断拖动的内容是否在某一个选项区域内，如果在，我们就用添加行的交互，将该行数据添加到对应分组的中继器里，然后用删除行的交互，将当前中继器该行的数据删除，最后取消所有背景矩形的选中。
每个区域组都是和上面一样判断，如果都不在所有区域里，那就是在空白位置或者在自己的分组区域里，这样我们只需要做还原操作即可，将拖动的动态面板移动回原来的位置，然后设置改内容的背景矩形取消选中，变回原来的颜色。
每一个分组都是这样和上面一样添加交互后，我们就完成了中继器制作拖动分组选择器的原型模板，后续使用也是很方便，默认的图片内容只需要在中继器里导入，即可自动生成的交互效果。
那以上就是本期教程的全部内容，感谢您的阅读，我们下期见。