本文由微信公众号：产品锦李（ID：IMPM996） 授权发布，未经许可，禁止转载，本教程源文件免费下载传送门>>
中继器和动态面板是 Axure 的两大神器，本文分享一个综合运用两者来实现拖拽式穿梭框的教程，先看一下效果。
点击 传送门>> 体验。
功能没有太多需要介绍的，这里需要注意，拖动的时候有个鼠标的“碰撞”事件，如果鼠标指针没有进入目标容器就松开，则拖拽不会生效。
很多人一听到中继器和动态面板就头都大了，实际上这个效果实现起来非常简单，如果你还不会动态面板和中继器的用法，建议先移步参考以下教程。
言归正传，先来看一下这个设计需要用到的元件以及它们的命名。
左右两边的结构是一模一样的，命名的时候可以用“左”“右”来区分，方便写交互的时候能找对元件。
接下来写交互，可以先把左边的穿梭框的交互写好，再复制粘贴到右边对应的元件，然后改一下目标元件就可以了。
首先在中继器【每项加载】时，给【项内容】（矩形）设置文本，取值是中继器中的【Content】。
接着来写拖拽的交互，首先找到【中继器】中的【项】（动态面板），添加【拖动时】的交互，使【当前元件】（动态面板）跟随拖动，注意同时要在中继器中【标记当前行】。
拖动的效果就有了，接下来需要在【拖动结束时】进行判断。
松开鼠标时，鼠标指针如果【接触】到目标容器（拖动左边的项，目标容器就是【容器-右】）时，则往右边的中继器中【添加行】，添加的数据就是当前正在拖拽的这一行的值。
然后将左边中继器中【已标记的行】删除。
如果鼠标没有接触到目标容器，则将【当前元件】【移动回拖动前位置】，并【取消标记当前行】，这一步非常重要，一定不能少。
这样就实现了从左边容器拖拽项目到右边容器的效果，基本逻辑就是拖拽操作成立时，从当前中继器删除数据，并添加到目标中继器中。
左边配置完之后，右边就容易多了，直接复制事件到右边对应的元件，然后把目标元件改一下即可，原来是左边的就改成右边，原来是右边的就改成左边。
就是这么简单，你不妨也来试一下吧。
拖动之后没有进入到对面去，这个是哪里设置错了吗？