大家好，我是大马猴，又见面了，今天给大家带来一个图标换位的教程，如果大家对我的教程及作品感兴趣，可以到我的商城店铺去看看其他作品，都是高端交互制作，欢迎大家一起交流学习。

商城地址

https://www.axureshop.com/shop/3602 

大家先看图标换位的效果：

一、下面开始给大家说下实现方式

1、我们先创建一个动态面板（里面加个图标，或者矩形，或者其他形状都可以，看个人喜好）

2、接下来我们把这个动态面板添加事件为拖动时移动动态面板。

3、然后我们要加4个全局变量，来获取互相换位置的这2个动态面板的x，y的坐标值。

ax ay 对应开始移动的那各图标的横纵坐标。

bx by 对应你要交换的那个图标的横纵坐标。

4、我们要给动态面板添加事件为移动开始时设置ax=这个坐标的x值，ay=这个坐标的y值。

里面细节

5、继续添加事件为移动时设置bx，by的坐标值

里面细节

6、给这个动态面板再加一个拖动开始时置顶的事件，这样每个动态面板拖动时就都在最上面显示了。这样第一部分的工作就完成了。

7、接下来，我们可以复制一个动态面板了，起名1跟2，这样方便找到。

8、给1增加判断当1拖动结束时如果接触2了，就让2移动到1的起始位置，让1移动到2的当前位置。如果1没有接触到2，就设置返回拖动时的位置。

9、现在给2设置相同的判断事件，当2接触1时，就让1移动到2的起始位置，让2移动到1的当前位置。同理

10、现在大家可以按F5来试试看，是不是都互换位置了。很简单吧。如果想做多一些图标的话，就复制复制复制再复制，然后记得把判断加上，每增加一个图，都要多判断一条。

十个图的判断如下：

二、总结：

1、首先要对面板进行可拖动事件处理，并且图标会有上下遮挡的情况，所以要拖动图标时置顶图标。

2、然后拖动图标时要获取到两个图标互换位置前x，y坐标值，用了4个全局变量。

3、接下来判断两个图标接触时应该互换位置，未接触时应该返回原位置。

4、最后祝福大家在设计的道路上砥砺前行。