中继器+动态面板实现拖拽式穿梭框教程

中继器和动态面板是 Axure 的两大神器，本文分享一个综合运用两者来实现拖拽式穿梭框的教程，先看一下效果。

功能没有太多需要介绍的，这里需要注意，拖动的时候有个鼠标的“碰撞”事件，如果鼠标指针没有进入目标容器就松开，则拖拽不会生效。

很多人一听到中继器和动态面板就头都大了，实际上这个效果实现起来非常简单，如果你还不会动态面板和中继器的用法，建议先移步参考以下教程。

言归正传，先来看一下这个设计需要用到的元件以及它们的命名。

左右两边的结构是一模一样的，命名的时候可以用“左”“右”来区分，方便写交互的时候能找对元件。

接下来写交互，可以先把左边的穿梭框的交互写好，再复制粘贴到右边对应的元件，然后改一下目标元件就可以了。

首先在中继器【每项加载】时，给【项内容】（矩形）设置文本，取值是中继器中的【Content】。

接着来写拖拽的交互，首先找到【中继器】中的【项】（动态面板），添加【拖动时】的交互，使【当前元件】（动态面板）跟随拖动，注意同时要在中继器中【标记当前行】。

拖动的效果就有了，接下来需要在【拖动结束时】进行判断。

松开鼠标时，鼠标指针如果【接触】到目标容器（拖动左边的项，目标容器就是【容器-右】）时，则往右边的中继器中【添加行】，添加的数据就是当前正在拖拽的这一行的值。

然后将左边中继器中【已标记的行】删除。

如果鼠标没有接触到目标容器，则将【当前元件】【移动回拖动前位置】，并【取消标记当前行】，这一步非常重要，一定不能少。

这样就实现了从左边容器拖拽项目到右边容器的效果，基本逻辑就是拖拽操作成立时，从当前中继器删除数据，并添加到目标中继器中。

左边配置完之后，右边就容易多了，直接复制事件到右边对应的元件，然后把目标元件改一下即可，原来是左边的就改成右边，原来是右边的就改成左边。

就是这么简单，你不妨也来试一下吧。