选择器是系统中常用的选择工具，一般分为点击选择器和滑动选择器。今天作者就教大家如何在Axure里面用中继器制作滑动穿梭框选择器的原型模板。
制作完成之应具备以下交互效果：
- 穿梭框效果：可以通过左右拖动，将选项从可选栏目移动到已选栏目，活动从已选栏目移动到可选栏目
- 复用性效果：可以在中继器表格里面增加、删除、修改选项，数据维护后自动生成交互效果
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://rs5y5o.axshare.com/#g=1
【原型下载】
方式2：https://weidian.com/item.html?itemID=3664758036
一、选择器的制作
我们新建一个中继器，中继器里默认自带一个矩形，我们设置矩形的选中样式和禁用样式。
选中样式就是鼠标移入选项时变灰的样式，禁用样式就是拖动选项时变蓝的样式。
然后我们把这个矩形转为动态面板，这样我们就可以拖动矩形了。
这里我们在中继器表格里Column0出填写具体的选项，因为中继器默认自带设置文本的交互，所以我们不需要修改交互，就可以自动把文字设置到矩形里。
鼠标移入动态面板时，我们用设置矩形选中为真，鼠标移出动态面板时，设置矩形选中为假，添加这个交互之后就可实现移入变色的效果。
二、选择器的复制
完成之后我们把该中继器命名为中继器1，即左侧可选栏目的中继器，然后复制命名为中继器2，中继器2是已选栏目，默认为空，所以我们情况中继器2Column0的所有选项，完成后如下图所示
三、左侧选择器的交互
两个选择则器都制作好之后，我们可以添加交互了，我们首先来增加左侧可选栏目选择器的交互：
1、动态面板拖动时
首先我们用移动的事件，选择跟谁鼠标水平拖动，并且设置拖动的范围，这里拖动的范围是，左侧要大于0，右侧的边界要小于等于已选栏目中继器右侧的那条边，当然也可以理解为左侧边界要小于中继器2左侧的坐标值，但是因为他是在中继器1里面的，所以要减去中继器1左侧的坐标值。
然后用置顶的交互，把左侧可选栏目至于顶层，放置被右侧已选栏目遮挡住，保证移动的过程中，选项都是可以见的。
最后我们用禁用的交互，前面设置的禁用样式为蓝色，这样拖动是就可以看到变色了。
2、动态面板拖动结束时
结束的时候，我们需要根据鼠标指针的位置，判断是否想将该选项移动到右边。
如果鼠标指针位于已选栏目组合的范围内，代表是需要移动到右边的，这时我们用添加行的交互，把当前行的值添加有中继器2里，然后再用删除行的交互，删除当前中继器1的改选项，最后用启用事件，把禁用的矩形启用。
如果如果鼠标指针没有接触已选栏目组合的范围内，我们用移动事件，将动态面板移动到回拖动前的位置，最后用启用事件，把禁用的矩形启用。
四、右侧选择器的交互
右侧选择器的交互其实和左侧选择器的交互基本一致的，只是有左边移动到右边还是从右边移动到左边。主要不同有两点：
1、移动的边界，右边移动到左边，所他他的左边界应该要小于等于0，而且大于等于中继器1的左边界的坐标值，因为在中继器2里，所以也要减去中继器2的坐标值。
2、添加行和删除行，右边移动到左边，应该是在中继器1里添加该选项的行，然后在中继器2中删除当前行。
这样我们就完成滑动选择器原型模板的制作了，以后使用时只需要在中继器表格里填写选项，就可自动生成能滑动的穿梭框效果，是不是很方便呢？
那以上就是用中继器制作滑动选择器原型模板的全部内容了，感谢您的阅读，我们下期见。
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
