axure商城

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

本文由微信公众号:产品锦李(ID:IMPM996) 授权发布,未经许可,禁止转载,本教程源文件免费下载传送门>>

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

点击 传送门>> 体验。

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

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

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

《动态面板的救赎》

《中继器,你这个“渣男”(基础篇)》

《中继器,你这个“渣男”(进阶篇)》

《中继器,你这个“渣男”(实战篇)》

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
案例教程

Axure 中继器拖拽排序

2023-11-20 11:52:29

Axure教程案例教程高级教程

我用 Axure 做了一个云盘

2023-12-29 18:47:21

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索