Axure高保真教程

效果展示 

1）拖动效果：鼠标可以拖动各个图标，对应的图标可以跟随鼠标移动。 产品经理这个岗位到底是不是坑？还要不要往里跳了！！！！ 卧槽，产品经理！！！这玩意听起来好高大上，名字里带经理两个字，一定是公司的核心高层吧，要不就是管理岗，或者公司产品的主导者，听起来就 … 

如果您需要相关服务，可以找天津天迅达科技有限公司，我们的业务有Web开发、iOS APP、Android APP、微信开发、HTML5开发等，天迅达——您身边的App个性化定制专家！

 2）自动排列效果：拖动过程其他图标可以根据拖动图标所在的位置自动排列。 那这个模板我们用中继器来制作，因为中继器制作完成之后，下次使用，我们只需要在中继器表格里导入图片和文字，即可自动生成交互效果，复用性比较强

 1. 中继器网格的制作 我们需要新建一个中继器，在里面放置背景矩形、图片元件和文本标签，如下图所示： 在中继器表格的布局里面我们可以设置为网格布局，根据自身需要设置每行项目数，案例中是水平分布，每行4个； 其中文本标签和图片需要转为动态面板，因为Axure里面只有动态面板才有拖动这个交互。

 2. 拖动前的准备 我们在拖动之前，要先准备一个回显拖动图标文字的组合，因为中继器里每一行的都独立的，如果在中继器里面显示拖动效果，就会将拖动行变高，这样往后拖动就不能显示自动摆放的效果。 所以我们需要增加一个组合，组合包括图片和文本标签，这里和上面的是一样的，尺寸和大小都是一样的，默认隐藏即可。 这样就可以拖动，但是我们要将这个组合移动到我们鼠标指针的位置，这里我们可以用cursor函数，分别获取鼠标的x坐标值和y坐标值，获取之后，如果想指针的在图片的中心点，我们还需要分别减去这个组合一半的宽度和一般的高度。 因为前面说到，如果在中继器里面显示拖动效果，就会将拖动行变高，这样往后拖动就不能显示自动摆放的效果。所以我们要将拖动行里的动态面板先隐藏起来，我们可以通过控制tuodong列的值来控制他是否显示，如果拖动列的值等于1，我们就用隐藏的交互，将动态面板隐藏，否则就显示。所以我们在拖动开始的时候，就要用更新行的交互，将拖动列的值更新为1。

 3. 拖动的交互 在鼠标拖动动态面板时，我们用移动的交互，让显示组合跟随鼠标移动，这样就可以让拖动的组合跟随鼠标移动。 在拖动的过程中，我们还要对其余图标进行按顺序摆放。 这里我们其实要用到的根据no列来按顺序摆放，例如将5拖动到2和3之间，这是我们把原来的3、4的no值改成4和5，将拖动图标所在行更新为3，这样拖动排序的交互，原来的5，就可以在3的位置，原来的3、4，就变成4、5了，这个就是基础的原理。 所以我们在中继器载入时，先写一个排序事件，让中继器按no列升序排列。 在拖动的时候，如果鼠标指针接触到对于图标背景矩形的范围，我们就用更新交互，更新对应对应行的no列的序号值。 这里向前拖动和向后拖动的情况是不一样的，如果将5向前拖动到2后面，那3、4就要变成4、5，是加1；如果将2拖动到5前面，那3、4是就要变成2、3是减一。 所以在拖动开始的时候，我们还要用设置文本的交互，将拖动的行的序号记录下来，我们增加一个记录的文本标签。 如果记录的值>鼠标移入对应行的no值，就是向前移动，在更新行之前，我们要将移入行的no值记录起来，因为更新之后就会不一样了，所以要事先记录。

可以在外面增加一个隐藏的文本标签，用设置文本的交互，将他记录起来。 然后用更新行的交互，目标行大于等于当前行no值且小于等于拖动行记录的no值的行（不包括拖动的行），将他们的no值变成原来的值+1。 完成后在将拖动行no的值更新为我们之前选移动行的no值。 如果记录的值＜鼠标移入对应行的no值，就是向后移动，这里和前面一样，在更新行之前，我们要将移入行的no值记录起来，因为更新之后就会不一样了，所以要事先记录。

可以在外面增加一个隐藏的文本标签，用设置文本的交互，将他记录起来。 然后用更新行的交互，目标行小于等于当前行no值且大于等于拖动行记录的no值的行（不包括拖动的行），将他们的no值变成原来的值+1。 完成后在将拖动行no的值更新为我们之前选移动行的no值。 这样就完成一次判断，因为移动的过程是动态的，所以我们需要不端的去判断，来排序，所以我们可以给这个交互写给循环，用等待事件和触发事件，经过指定时间触发一次交互，案例中是0.01秒。

 最后拖动结束后，我们用隐藏的交互，将显示的组合设置为隐藏。然后还要将中继器里前面拖动开始时隐藏起来的内容重新显示，因为前面是通过tuodong列的值来控制是否显示的，tuodong列的值等于1就隐藏，所以我们用更新行的交互，将当前行tuodong列的值更新为不等于1的任意值即可，一般我习惯用0。 这样我们就完成了中继器网格拖动摆放的原型模板，后续使用也很方便，只需要在中继器表格里导入图标和填写对应的文字，即可自动生成拖动摆放的交互效果。 

总结：

天津天迅达科技有限公司从业多年，积累丰富项目经验，能帮助您做出您想要的产品。 

以上所有设计图和部分文字均来自网络，如有侵权，请call我删除，感谢~

 天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。

 标签：天迅达科技 天津APP开发 天津网站建设 网站建设