编辑导读:随着系统的升级，用户的操作习惯发生了变化，从过去的一点一点到现在的拖。拖拽和滑动操作在软件操作中越来越常见。本文作者分享了如何用Axure制作一个拖拽选择器，希望对你有所帮助。

随着系统的升级，用户的操作习惯发生了变化，从过去的一点一点到现在的拖拖拉拉。拖拽和滑动操作在软件操作中越来越常见。所以今天笔者就教大家如何利用Axure中的repeater和dynamic panel做一个拖拽选择的穿梭选择器。

原型预览地址:https://xqvfpk.axshare.com/#g=1

选择器分为可选列和被选列，两边选择器中的组件是一样的，我们就以左边的可选列选择器展开解释。

具体材料包括:复读机、背景架

1.Repeater:里面的矩形改为动态面板，因为在axure中只能拖动动态面板，然后需要设置样本颜色为无边框线，选择的颜色为灰色，禁用的颜色为蓝色。

在repeater表中，默认列Column0可以填充选项，如下图所示。

2.背景框架:矩形制成，设置框架颜色，放在repeater选项下。

当加载repeater的每个项目时，将repeater内部矩形的文本值设置为item。Column0，即repeater中Column0列的值。这种交互是默认存在的，如果我们没有改变它，就不需要改变它。

在加载repeater的时候，如果我们想在这里修复选项的排序，那么我们可以添加排序事件，如果不需要修复排序，就不需要添加。

当鼠标移动到动态面板中时，我们通过设置选定的交互来选择repeater内部的矩形。当鼠标移出动态面板时，我们通过设置选定的交互来取消选择repeater内的矩形。这是为了让每个选项都有一个移入和改变颜色的效果，因为之前我们把矩形的选中样本颜色设置为灰色，所以移入会变成灰色。那为什么不用鼠标悬停在这里时的交互呢？那是因为复读机的bug。后续拖动选项后，虽然鼠标移出了区域，但是复读机还是会认为鼠标停留在原来的地方，会自动让下一个选项变色。所以我们不使用鼠标悬停的交互风格。

鼠标拖动动态面板时，我想用移动事件移动动态面板和谁的水表在X轴方向移动，用顶组合顶组合。如果没有放置顶部，移动过程可能会被其他组件阻止。然后我们必须禁用中继器内的矩形。在我们面前，我们将禁用矩形的样式设置为蓝色。这样做的原因是为了产生变色效果。

此时，我们可以复制整个组合，然后粘贴一个选择器组合作为右边选中的列。

回到左边选择器的交互。当鼠标拖动动态面板时，我们将分两种情况来讨论。

首先，鼠标指针接触到右边所选列的组合，这意味着你要将选项移动到右边的选择器，所以我们要执行以下交互:

1.在右侧的repeater中添加一行。添加的内容是由当前选择器移动的内容。可以使用变量来选择repeater内容的文本，也可以直接使用repeater表中的item.column0。

2.删除左侧复读机中的行，即当前复读机，删除当前行，即移过去的选项。

3.启用中继器内的矩形。因为它在之前的移动中被禁用了，所以我们在这里重新启用了已启用交互的矩形。

第二种情况:鼠标指针没有释放到右边选中列的组合上。是的，这意味着用户移动了错误的项目，并且不想将项目向右移动。名称，我们将执行以下交互:

1.使用Move事件将动态面板移回其原始位置。

2.启用中继器内的矩形。因为它在之前的移动中被禁用了，所以我们在这里重新启用了已启用交互的矩形。

这样，我们就完成了左边可选列的交互。右边所选列的交互与左边相同，只是指针判断的接触范围由右边的选择器变为左边的选择器，增加的行在左边的选择器中增加，在右边的选择器中删除。

就这样，我们完成了生产。如果以后需要使用，只需要以左复读机的形式填写可选文字，就可以自动生成交互效果。方便吗？

这就是这个问题的全部。感谢您的阅读。88下一次见。

本文为@所作，非经理原创。每个人都是产品经理。未经作者允许，禁止转载。

图片来自Unsplash，基于CC0协议。