跟技術(shù)撕逼一個(gè)效果，花費(fèi)大量時(shí)間也無(wú)法交流出來(lái)，干脆動(dòng)手做一個(gè)算了，有圖說(shuō)明一切，同時(shí)分享給各位產(chǎn)品經(jīng)理，先看看效果。大神勿噴

效果很簡(jiǎn)單

軟件版本

axure 8.0.0.3308

制作思路

監(jiān)測(cè)所選中并移動(dòng)的動(dòng)態(tài)面板，獲取它的位置并記錄它，當(dāng)停止移動(dòng)后做判斷，每個(gè)動(dòng)態(tài)面板加上模塊重疊判斷條件，符合條件將接觸元件移動(dòng)到選中的動(dòng)態(tài)面板位置，同時(shí)將選中的元件移動(dòng)到新位置。

制作功能原型步驟&方法

第一步，設(shè)計(jì)草圖

利用元件工具，畫(huà)4個(gè)圖形，在面板上完成4個(gè)圖像的制作。

第二步：動(dòng)態(tài)面板命名

逐個(gè)將圖形轉(zhuǎn)成動(dòng)態(tài)面板，并從上至下逐個(gè)命名“1yuan”、“2yuan”“3yuan”“4yuan”

第三步：數(shù)據(jù)初始化（重點(diǎn)）

點(diǎn)擊工作面板任意位置，選擇“頁(yè)面載入時(shí)”，新建4個(gè)“變量”，我這里命名為“Y_1_zhi”、“Y_2_zhi”、“Y_3_zhi”、“Y_4_zhi”

將動(dòng)態(tài)面板“1yuan”的Y坐標(biāo)賦予變量“Y_1_zhi”，同理：

• 動(dòng)態(tài)面板“2yuan”的Y坐標(biāo)賦予變量“Y_2_zhi”
• 動(dòng)態(tài)面板“3yuan”的Y坐標(biāo)賦予變量“Y_3_zhi”
• 動(dòng)態(tài)面板“4yuan”的Y坐標(biāo)賦予變量“Y_4_zhi”

再新建一個(gè)變量，將動(dòng)態(tài)面板“1yuan”的X坐標(biāo)賦予變量“X_t”（注意是“X坐標(biāo)”）。

學(xué)到這里如果不明白啥是變量或者賦值，請(qǐng)直接下載源文件吧，估計(jì)下面的教程也看不懂

第四步：移動(dòng)判斷（核心）

選擇名字為“1yuan”的“動(dòng)態(tài)面板“

添加“拖動(dòng)開(kāi)始時(shí)”事件，將動(dòng)態(tài)面板“1yuan”當(dāng)前的Y坐標(biāo)賦予變量“Y_1_zhi”

添加“拖動(dòng)時(shí)”事件，限制只能垂直拖動(dòng)，并在移動(dòng)時(shí)候，處于置頂狀態(tài)

添加“拖動(dòng)結(jié)束時(shí)”事件，添加判斷“動(dòng)態(tài)面板1接觸到動(dòng)態(tài)面板2”的條件。

“1yuan”的位置移動(dòng)到“2yuan”的“Y坐標(biāo)”， X坐標(biāo)使用前面初始化的

“2yuan”的位置移動(dòng)到“1yuan”的“Y坐標(biāo)”， X坐標(biāo)使用前面初始化的

最后將“2yuan”的當(dāng)前Y坐標(biāo)賦予變量“Y_2_zhi”。

現(xiàn)在我們“F5”預(yù)覽一下，移動(dòng)“元件模塊_1”到“元件模塊_2”的地方，發(fā)現(xiàn)它們已經(jīng)實(shí)現(xiàn)換位置了。恭喜成功！！

教程到此結(jié)束，接下來(lái)需要同樣的方法完成剩下的元件即可。

大神請(qǐng)繞過(guò)，勿噴我這小兒科的東西。

源文件下載

鏈接:? https://pan.baidu.com/s/1htZ7lXi? 密碼: cyiu

本文由 @仁德 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)源于網(wǎng)絡(luò)